vue实现计算器功能

时间:2020-05-17 ali是个小太阳人气:0

本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <script src="https://unpkg.com/vuehttps://img.qb5200.com/download-x/dist/vue.js"></script>
</head>
<body>
<div id="app">
 <input type="text" v-model="n1">
 <select v-model="opt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" v-model="n2">
 <input type="button" value="=" @click="calc">
 <input type="text" v-model="result">
</div>
<script>
new Vue({
 el: '#app',
 data: {
  n1: 0,
  n2: 0,
  result: 0,
  opt: '+'
 },
 methods: {
  calc() {
   switch (this.opt) {
    case "+":
     this.result = parseInt(this.n1) + parseInt(this.n2);
     break;
    case "-":
     this.result = parseInt(this.n1) - parseInt(this.n2);
     break;
    case "*":
     this.result = parseInt(this.n1) * parseInt(this.n2);
     break;
    case "/":
     this.result = parseInt(this.n1) / parseInt(this.n2);
     break;
   }
  }
 }
})
</script>
</body>
</html>

效果图：

加载全部内容