VUE课程参考---10、使用v-model实现简单计算器

一、总结

一句话总结：

使用v-model实现简单计算器也就是v-model做双向数据绑定，交互多的页面用vue做双向数据绑定会比较方便

<div id="app">
    <input type="text" v-model="n1" @change="calc">
    <select v-model="opt" @click="calc">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2" @change="calc">
    <input type="button" value="=" @click="calc">
    <input type="text" v-model="result">
</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            n1: 0,
            n2: 0,
            opt: '+',
            result: 0
        },
        methods: {
            calc:function () {
                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>

二、使用v-model实现简单计算器

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>10、使用v-model实现简单计算器</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 使用v-model实现简单计算器也就是v-model做双向数据绑定，交互多的页面用vue做双向数据绑定会比较方便
11 
12 -->
13 <div id="app">
14     <input type="text" v-model="n1" @change="calc">
15     <select v-model="opt" @click="calc">
16         <option value="+">+</option>
17         <option value="-">-</option>
18         <option value="*">*</option>
19         <option value="/">/</option>
20     </select>
21     <input type="text" v-model="n2" @change="calc">
22     <input type="button" value="=" @click="calc">
23     <input type="text" v-model="result">
24 </div>
25 <script src="../js/vue.js"></script>
26 <script>
27     let vm = new Vue({
28         el: '#app',
29         data: {
30             n1: 0,
31             n2: 0,
32             opt: '+',
33             result: 0
34         },
35         methods: {
36             calc:function () {
37                 switch(this.opt){
38                     case "+":
39                         this.result=parseInt(this.n1)+parseInt(this.n2);
40                         break;
41                     case "-":
42                         this.result=parseInt(this.n1)-parseInt(this.n2);
43                         break;
44                     case "*":
45                         this.result=parseInt(this.n1)*parseInt(this.n2);
46                         break;
47                     case "/":
48                         this.result=parseInt(this.n1)/parseInt(this.n2);
49                         break;
50                 }
51             }
52         }
53     });
54 </script>
55 </body>
56 </html>