zoukankan html css js c++ java

Vue 制作简易计算器

<!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>

查看全文

相关阅读:
react 踩坑第一天
 vue-cli+axios+跨域
 vuex 进阶 mapState mapGetter mapActions mapMutations
vue Bus
各种html布局
 echarts柱状图设置渐变色
 html设置一个当前时间
 css设置字体渐变色
 C++中指针与引用详解
 go-admin 开源后台管理系统

原文地址：https://www.cnblogs.com/f-rt/p/10065280.html