lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{{num1}}</span> + <span>{{num2}}</span> = <span>{{num3}}</span>
        <br>
        <button @click="changeNum1">num1++</button>
        <button @click="num2++">num2++</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num1:1,
                num2:2,
                // num3:3
            },
            methods:{
                changeNum1(){
                    this.num1++;
                    this.num3 = this.num1 + this.num2;
                    // this.num3 = this.num1 + this.num2;
                }
            },
            // computed 计算属性
            // 如果当前计算属性所依赖的值发生变化，那么计算属性会自动重新计算
            computed:{
                num3(){
                    console.log("num3被计算了");
                    return this.num1 + this.num2;
                }
                // num3:{
                //     get(){
                //         console.log("num3被计算了");
                //         return this.num1 + this.num2;
                //     },
                //     set(val){
                //         console.log("num3被设置为了" + val);
                //     }
                // }
            }
        })
    </script>
</body>
</html>