分别用方法，计算属性，监听属性实现计算器功能

通用设置

1.首先在头部引入vue文件

<script src="vue.js"></script>

2.书写简单样式

用input接收用户输入的值，v-model与对应属性进行双向绑定，select进行运算符选择（同时将运算符也用v-model进行双向绑定），方法实现计算器效果需要触发事件调用函数，所以我们可以加一个按钮绑定点击事件（注意：在书写计算属性实现计算器效果时，如果直接调用属性，会出现计算结果不显示的情况，这时候我们需要直接调用函数。）。

<div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select name="" id="" v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>

 3.实例化vue对象

var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0

                }

方法实现计算器功能

点击按钮触发change函数，函数内部用if分支语句实现运算符不同的情况的下的不同运算。

methods: {
                    change ()
                    {
                        if ( this.opt == '+' )
                        {
                            this.results = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.results = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.results = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.results = this.num1 / this.num2;
                        }
                    }
                }

计算属性实现计算器功能

用if分支语句实现运算符不同的情况的下的不同运算，return将值返回给函数，然后直接调用函数即可显示结果。

computed: {
                    changes ()
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = this.num1 / this.num2;
                        }
                    }
                }

监听属性实现计算器功能

分别监听输入的第一个数字，第二个数字和运算符，只要有一个发生改变，就触发对应的函数。

watch: {
                    opt ( val )
                    {
                        if ( val == '+' )
                        {
                            this.result = this.num1 + this.num2;
                        } else if ( val == '-' )
                        {
                            this.result = this.num1 - this.num2;
                        } else if ( val == '*' )
                        {
                            this.result = this.num1 * this.num2;
                        } else if ( val == '/' )
                        {
                            this.result = this.num1 / this.num2;
                        }
                    },
                    num1 ( n1 )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = n1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.result = n1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.result = n1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.result = n1 / this.num2;
                        }
                    },
                    num2 ( n2 )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = this.num1 + n2;
                        } else if ( this.opt == '-' )
                        {
                            this.result = this.num1 - n2;
                        } else if ( this.opt == '*' )
                        {
                            this.result = this.num1 * n2;
                        } else if ( this.opt == '/' )
                        {
                            this.result = this.num1 / n2;
                        }
                    }
                }

运行效果

 （方法结果要通过点击计算按钮实现，计算属性结果和监听属性结果可以实时显示） 

完整代码

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="vue.js"></script>
    </head>

    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select name="" id="" v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0

                },
                //方法实现计算器功能
                methods: {
                    change ()
                    {
                        if ( this.opt == '+' )
                        {
                            this.results = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.results = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.results = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.results = this.num1 / this.num2;
                        }
                    }
                },
                //计算属性实现计算器功能
                computed: {
                    changes ()
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = this.num1 / this.num2;
                        }
                    }
                },
                //监听属性实现计算器功能
                watch: {
                    opt ( val )
                    {
                        if ( val == '+' )
                        {
                            this.result = this.num1 + this.num2;
                        } else if ( val == '-' )
                        {
                            this.result = this.num1 - this.num2;
                        } else if ( val == '*' )
                        {
                            this.result = this.num1 * this.num2;
                        } else if ( val == '/' )
                        {
                            this.result = this.num1 / this.num2;
                        }
                    },
                    num1 ( n1 )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = n1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.result = n1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.result = n1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.result = n1 / this.num2;
                        }
                    },
                    num2 ( n2 )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = this.num1 + n2;
                        } else if ( this.opt == '-' )
                        {
                            this.result = this.num1 - n2;
                        } else if ( this.opt == '*' )
                        {
                            this.result = this.num1 * n2;
                        } else if ( this.opt == '/' )
                        {
                            this.result = this.num1 / n2;
                        }
                    }
                }
            } )
        </script>
    </body>

</html>