Vue 制作简易计算器

最新推荐文章于 2023-04-03 10:27:06 发布

track sun

最新推荐文章于 2023-04-03 10:27:06 发布

阅读量186

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/f-rt/p/10065280.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.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" @click="calc1" value="=">
  <input type="text" v-model="result">
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
   n1:0,
   n2:0,
   opt: '+',
   result: 0,
  },
  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;
        }
    },
      calc1(){
      var codeStr = 'parseInt(this.n1) ' + this.opt + 'parseInt(this.n2)';
        this.result =eval(codeStr);
      }

  }
})
</script>
</body>
</html>