使用methods和computed以及watch计算加减乘除

前言：

使用的是HBuilder X软件

使用插件为vue.js

使用的分别是方法，计算属性，和监听的方式来计算加减乘除

---

准备：

1.建立一个id为app的div并建立两个文本框及一个放置加减乘除的四个选择的列表结果为res

<div id="app">
        <input type="text" placeholder="输入第一个数" >
        <select>
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数"> <br>
 结果是:{{res}} <br>
    </div>

2.使用script定义组件

<script>
        const vm = new Vue({
            el: "#app",
            data: {
                num5:0,
                num6:0,
                sign2:"+",
                res2:""
                }
        })
    </script>

3.用v-model.number与script中的属性建立联系

<div id="app">
         <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
</div>

 4.使用方法methods来进行符号的切换运算

methods:{
                change(){
                    if(this.sign2 === "+") {
                        this.res2 = this.num5 + this.num6;
                    } else if(this.sign2 === "-") {
                        this.res2 = this.num5 - this.num6;
                    } else if(this.sign2 === "*") {
                        this.res2 = this.num5 * this.num6;
                    } else if(this.sign2 === "/"){
                        this.res2 = this.num5 / this.num6;
                    }
                }
            },

5.重复步骤1，2，3建立不同的变量(可在1中的div写不用建立新的div)

<script>
        const vm = new Vue({
            el: "#app",
            data: {
                num1:0,
                num2:0,
                sign:"+",
                num3:0,
                num4:0,
                sign1:"+",
                res1:"",
                num5:0,
                num6:0,
                sign2:"+",
                res2:""
</script>

<div id="app">
        <input type="text" placeholder="输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
        结果是:{{res}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
        结果是:{{res1}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
        结果是:{{res2}}
    </div>

6.使用计算属性来进行运算

computed:{
                res(){
                    if(this.sign === "+") {
                        return this.num1 + this.num2;
                    } else if(this.sign === "-") {
                        return this.num1 - this.num2;
                    } else if(this.sign === "*") {
                        return this.num1 * this.num2;
                    } else if(this.sign === "/"){
                        return this.num1 / this.num2;
                    }
                }
            },

7.使用侦听器来进行计算

watch:{
                num3(val){
                    if(this.sign1 === "+") {
                        this.res1 = val + this.num4;
                    } else if(this.sign1 === "-") {
                        this.res1 = val - this.num4;
                    } else if(this.sign1 === "*") {
                        this.res1 = val * this.num4;
                    } else if(this.sign1 === "/"){
                        this.res1 = val / this.num4;
                    }
                },
                num4(val){
                    if(this.sign1 === "+") {
                        this.res1 = this.num3 + val;
                    } else if(this.sign1 === "-") {
                        this.res1 = this.num3 - val;
                    } else if(this.sign1 === "*") {
                        this.res1 = this.num3 * val;
                    } else if(this.sign1 === "/"){
                        this.res1 = this.num3 / val;
                    }
                },
                sign1(val){
                    if(val === "+") {
                        this.res1 = this.num3 + this.num4;
                    } else if(val === "-") {
                        this.res1 = this.num3 - this.num4;
                    } else if(val === "*") {
                        this.res1 = this.num3 * this.num4;
                    } else if(val === "/"){
                        this.res1 = this.num3 / this.num4;
                    }
                }
            }

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		
	</head>
	<body>
    <div id="app">
        <input type="text" placeholder="输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
        结果是:{{res}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
        结果是:{{res1}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
        结果是:{{res2}}
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num1:0,
                num2:0,
                sign:"+",
                num3:0,
                num4:0,
                sign1:"+",
                res1:"",
                num5:0,
                num6:0,
                sign2:"+",
                res2:""
            },
            methods:{
                change(){
                    if(this.sign2 === "+") {
                        this.res2 = this.num5 + this.num6;
                    } else if(this.sign2 === "-") {
                        this.res2 = this.num5 - this.num6;
                    } else if(this.sign2 === "*") {
                        this.res2 = this.num5 * this.num6;
                    } else if(this.sign2 === "/"){
                        this.res2 = this.num5 / this.num6;
                    }
                }
            },
            computed:{
                res(){
                    if(this.sign === "+") {
                        return this.num1 + this.num2;
                    } else if(this.sign === "-") {
                        return this.num1 - this.num2;
                    } else if(this.sign === "*") {
                        return this.num1 * this.num2;
                    } else if(this.sign === "/"){
                        return this.num1 / this.num2;
                    }
                }
            },
            watch:{
                num3(val){
                    if(this.sign1 === "+") {
                        this.res1 = val + this.num4;
                    } else if(this.sign1 === "-") {
                        this.res1 = val - this.num4;
                    } else if(this.sign1 === "*") {
                        this.res1 = val * this.num4;
                    } else if(this.sign1 === "/"){
                        this.res1 = val / this.num4;
                    }
                },
                num4(val){
                    if(this.sign1 === "+") {
                        this.res1 = this.num3 + val;
                    } else if(this.sign1 === "-") {
                        this.res1 = this.num3 - val;
                    } else if(this.sign1 === "*") {
                        this.res1 = this.num3 * val;
                    } else if(this.sign1 === "/"){
                        this.res1 = this.num3 / val;
                    }
                },
                sign1(val){
                    if(val === "+") {
                        this.res1 = this.num3 + this.num4;
                    } else if(val === "-") {
                        this.res1 = this.num3 - this.num4;
                    } else if(val === "*") {
                        this.res1 = this.num3 * this.num4;
                    } else if(val === "/"){
                        this.res1 = this.num3 / this.num4;
                    }
                }
            }
        })
    </script>
</body>
	
</html>