VUE分别使用普通方法、计算属性、监听器完成简易计算器-526互联

计算器功能:

1.加减乘除模可以随意切换
使用表单元素< seclect >

2.当输入框中数字改变时实时得出运算结果
方法1：v-model绑定input框的值，绑定input键盘按下和鼠标点击时触发自定义方法getResult，该方法用来计算表达式的值。
方法2：使用computed计算属性
方法3：使用watch侦听属性

3.可以使用上下按钮调节数字大小
使用input 属性 type=“number”

4.结果框禁止输入
input添加事件οnfοcus=“this.blur()”

一、普通方法

通过methods中自定义方法，然后在input表单上通过v-on绑定keyup键盘事件，实现实时更新计算结果的功能。

 1 <!DOCTYPE html1>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <input id="input" type="number" v-model="num1" @keyup="getResult" @click="getResult" /> 
11              <select v-model="selected" @click="getResult">
12                 <option value ="">请选择</option>
13                  <option value ="+">+</option>
14                 <option value ="-">-</option>
15                 <option value ="*">*</option>
16                 <option value ="/">/</option>
17                 <option value ="%">%</option>
18              </select>
19             <input type="number" v-model="num2" @keyup="getResult" @click="getResult"/>
20             <input type="text" v-model="result" onfocus="this.blur()" />
21         </div>
22         <script type="text/javascript">
23             var vm = new Vue({
24                 el:'#app',
25                 data:{
26                     num1:0,
27                     num2:0,
28                     result:null,
29                     selected:''
30                 },
31                 methods:{
32                     
33                     getResult(){
34                         if(this.selected === '')
35                             return
36                         var str = this.num1 + this.selected + this.num2;
37                         this.result = eval(str);
38                     }
39                 },
40                 created:function(){
41                     this.getResult()
42                 }
43             })
44         </script>
45     </body>
46 </html>

二、通过computed计算属性

将计算结果设定为一个computed计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input id="input" type="number" v-model="num1" placeholder="请输入数字" />
             <select v-model="selected">
                <option value ="">请选择</option>
                 <option value ="+">+</option>
                <option value ="-">-</option>
                <option value ="*">*</option>
                <option value ="/">/</option>
                <option value ="%">%</option>
             </select>
            <input type="number" v-model="num2" placeholder="请输入数字"/>
            <input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    num1:0,
                    num2:0,
                    selected:''
                },
                computed:{
                    result:function(){
                        if(this.selected === '' || this.num1=='' || this.num2 =='')
                            return null
                        return eval(`${this.num1}${this.selected}(${this.num2})`)
                    }
                }
            })
        </script>
    </body>
</html>

三、使用watch侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
每当侦听的属性发生改变时，vue会执行该属性对应的函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input id="input" type="number" v-model="num1" placeholder="请输入数字" /> 
             <select v-model="selected">
                <option value ="">请选择</option>
                 <option value ="+">+</option>
                <option value ="-">-</option>
                <option value ="*">*</option>
                <option value ="/">/</option>
                <option value ="%">%</option>
             </select>
            <input type="number" v-model="num2" placeholder="请输入数字"/>
            <input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    num1:0,
                    num2:0,
                    result:null,
                    selected:''
                },
                methods:{    
                    com:function(){
                        if(this.selected === '' || this.num1=='' || this.num2==''){
                            this.result = null
                            return
                        }
                        this.result = eval(`${this.num1}${this.selected}(${this.num2})`)
                    }
                },
                watch:{
                    num1:function(){
                        this.com()
                    },
                    num2:function(){
                        this.com()
                    },
                    selected:function(){
                        this.com()
                    }
                },
                created(){
                    this.com()
                }
            })
        </script>
    </body>
</html>