lovecoding
/
W260426


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!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="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{num}}</h1>
        <!-- 如果事件处理函数内只有一行代码 那么可以直接写在事件后边 不用定义事件处理函数 -->
        <button type="button" @click="num++">增加</button>
        <div>
            <p>姓名{{obj.name}}</p>
            <p>年龄{{obj.age}}</p>
        </div>
        <button type="button" @click="obj.age++">年龄增加</button>
        
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                num: 0,
                obj:{
                    name:'张三',
                    age:18
                }
            },
            // watch监听属性值的变化
            watch:{
                // 把需要监听的属性值写在watch对象中 以函数的形式
                // 函数的参数是新值和旧值 （修改之后值，修改之前值）
                num(newVal,oldVal){
                    console.log(newVal,oldVal);
                    if(newVal>10){
                        // this.num=10;
                        console.log('num不能大于10');
                    }
                },
                // 如果监听的是一个对象属性变化 那么需要使用deep:true来监听对象的属性值的变化
                // obj(newVal,oldVal){
                //     console.log(newVal,oldVal);
                // }
                // 方法一
                // 改为对象的形式
                // 可以监听对象中所有属性的变化
                // 数组监听同样需要使用deep:true来监听数组的值的变化
                // obj:{
                //     // 监听对象的属性值变化
                //     handler(newVal,oldVal){
                //         console.log(newVal,oldVal);
                //     },
                //     // 监听对象的属性值变化
                //     deep:true
                // }
                // 方法二
                // 只能监听对象中具体某一个属性的变化
                "obj.age":(newVal,oldVal)=>{
                    console.log(newVal,oldVal);
                }
            }
        })
    </script>
</body>
</html>