码迷,mamicode.com
首页 > 其他好文 > 详细

侦听器watch 监听单个属性

时间:2018-11-30 14:05:28      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:col   log   返回值   this   src   html   meta   and   func   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ msg }}</p>
    <button @click="clickHandler">修改</button>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                msg:"alex",
                age:18,
            }
        },
        methods:{
           clickHandler(){
               this.msg="wusir" // 当msg的数据属性 发生改变,下面的watch就会立马监听**
           }
        },
        watch:{ //watch是监听单个属性, 是单个单个的监听,如果监听多个属性就要声明多个属性
            //watch 监听msg属性
            //function函数里面要有返回值
            "msg":function(value){
                //监听到数据之后,可以在这个地方做任何操作*****
             console.log(value);
            if (value === "wusir"){
                alert(1);
                this.msg = "大wusir"}//修改后内容
            },
            "age":function(value){}//监听age属性

        }// watch对应的对象,可以监听多个属性,比如监听msg
    })

</script>
</body>
</html>

 

侦听器watch 监听单个属性

标签:col   log   返回值   this   src   html   meta   and   func   

原文地址:https://www.cnblogs.com/kenD/p/10043346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!