其他分享
首页 > 其他分享> > 初识vue02

初识vue02

作者:互联网

2.vue的数据与方法

<body>
<div id="app">
    {{message}}
</div>
<script>
    let method={message:'hello~lobster'};
    let app = new Vue({
        el:'#app',
        data:method          //结果是hello~lobster
        /*
         这里的method指的是前面我写好的method方法,也可以写成data:{
                                                              message: 'hello~lobster'
                                                                  }
         */
    })
    method.message='hello',   //这时message的内容将会被更改成hello
    app.message='hi'         //这时message的内容将会是被改成hi
    //app.message==method.message


</script>
</body>

<body>
<div id="app">
    {{message}}
</div>
<script>
    let method={message:'hello~lobster'};
    let app = new Vue({
        el:'#app',
        data:method          //结果是hello~lobster
        /*
         这里的method指的是前面我写好的method方法,也可以写成data:{
                                                              message: 'hello~lobster'
                                                                  }
         */
    })
      //$watch方法要写在初始赋值与更改值之间!即现在这个位置
    app.$watch('message',function (newVal,oldVal) {//newVal指的是message新的值,oldVal旧的值
        console.log(newVal,oldVal) //控制台输出的结果是hello hello~lobster(刚好newVal,oldVal的位置对应上了)
    })
    method.message='hello'       //这时message的内容将会被更改成hello
 
</script>
</body>

标签:vue02,app,hello,oldVal,初识,lobster,message,method
来源: https://www.cnblogs.com/lobster123/p/13460851.html