1. 使用计算属性制作计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        select {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="app">
        <input type="number" v-model="num1"> + <input type="number" v-model="num2">=<span>{{add}}</span><br>
        <input type="number" v-model="num3"> - <input type="number" v-model="num4">=<span>{{minus}}</span><br>
        <input type="number" v-model="num5"> * <input type="number" v-model="num6">=<span>{{multi}}</span><br>
        <input type="number" v-model="num7"> / <input type="number" v-model="num8">=<span>{{division}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '.app',
            data: {
                num1: 0,
                num2: 0,
                num3: 0,
                num4: 0,
                num5: 0,
                num6: 0,
                num7: 0,
                num8: 0,
            },
            computed: {
                add() {
                    return this.num1 * 1 + this.num2 * 1;
                },
                minus() {
                    return this.num3 * 1 - this.num4 * 1;
                },
                multi() {
                    return this.num5 * 1 * this.num6 * 1;
                },
                division() {
                    return this.num7 * 1 / this.num8 * 1;
                },
            },
        });
    </script>
</body>
</html>

这样制作的计算器有一个缺点：不能手动去选择运算符，我只能以这样的方式分为了四个计算式，因为computed属性，会自动完成计算，不能动态的去设置其获取结果的方式，而且分为四个计算式以后，数据对象data中的属性太多了，数据太复杂，所以下面另外采用一种方式：使用侦听属性来制作计算器，它可以动态去侦听运算符的变化以及文本框的变化，这样就只需要一个计算式就能完成

2. 使用侦听属性制作计算器

2.1 先制作一个加法器，了解原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="number" v-model="num1"> +
        <input type="number" v-model="num2">
        = <span>{{res}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: ".app",
            data: {
                num1: 0,
                num2: 0,
                res: 0,
            },
            // 定义一个公共方法，求和运算
            methods: {
                add(n1, n2) {
                    this.res = n1 * 1 + n2 * 1;
                }
            },
            // 监听两个文本框中数值的变化，一旦变化就调用求和运算 
            watch: {
                num1() {
                    // 因为使用了 v-model 数据双向绑定，此时传入的参数就是变化后真实的值
                    this.add(this.num1, this.num2);
                },
                num2() {
                    this.add(this.num1, this.num2);
                },
            },
        });
    </script>
</body>
</html>

基于上面案例，可以将两个input框中间的+号运算符，使用一个下拉列表来代替，下拉列表中就保存 + - * / 四个运算符，然后在methods属性中做一个switch判断，使用不同的运算符就将结果赋于不同的运算值，最后在watch侦听属性中，侦听运算符的变化，就可以动态的获取结果

2.2 制作加减乘除计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="number" v-model="num1">
        <!-- 使用v-model 双向绑定此时下拉列表的值value -->
        <select v-model="cal">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model="num2">
        = <span>{{res}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: ".app",
            data: {
                // 设置默认值
                num1: 0,
                num2: 0,
                res: 0,
                cal: "+",
            },
            // 根据运算符的值（this.cal）定义不同的运算方法
            methods: {
                jisuan(n1, n2) {
                    switch (this.cal) {
                        case "+":
                            this.res = (n1 * 1) + (n2 * 1);
                            break;
                        case "-":
                            this.res = (n1 * 1) - (n2 * 1);
                            break;
                        case "*":
                            this.res = (n1 * 1) * (n2 * 1);
                            break;
                        case "/":
                            this.res = (n1 * 1) / (n2 * 1);
                            break;
                    }
                },
            },
            // 侦听属性
            watch: {
                // 监听第一个输入框
                num1() {
                    this.jisuan(this.num1, this.num2);
                },
                // 监听第二个输入框
                num2() {
                    this.jisuan(this.num1, this.num2);
                },
                // 监听运算符
                cal() {
                    this.jisuan(this.num1, this.num2);
                }
            },
        });
    </script>
</body>