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

Vue 2.0 随记

时间:2018-06-07 23:05:00      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:图片   his   ide   immediate   als   data   http   ted   open   

1、watch 中,immediate的用法:

       immediate -->百度翻译 立即的

技术分享图片
new Vue({
          el: ‘#app-7‘,
          data: {
            groceryList: [
              { id: ‘a‘, text: ‘蔬菜‘ },
              { id: ‘b‘, text: ‘奶酪‘ },
              { id: ‘c‘, text: ‘随便其它什么人吃的东西‘ }
            ],first_n:"first_n",first_c:"first_c",first:"first"
          },watch:{
                 first_c:{ 
                    immediate:true,
                    handler(curVal,oldVal){/*关键字 immediate*/
            console.log("first_c 值被改变");
          }
                },
                first(curVal,oldVal){
          console.log(curVal,oldVal);
        },
              first_n:{ 
                    handler(curVal,oldVal){/*比较新老两值 判断是否改变*/
                        if(curVal !=oldVal)
                        {
                            console.log("first_n 值被改变");
                        }
          },deep:false
                }
          }
        })
View Code

首次加载页面时的截图:

技术分享图片

            动态watch:

created:function (){
                    this.first = "second";
                    this.$watch(‘first‘,this.aa)
          },methods:{
                aa:function(curVal,oldVal){
                    console.log(curVal,oldVal);
                }
          }

 

Vue 2.0 随记

标签:图片   his   ide   immediate   als   data   http   ted   open   

原文地址:https://www.cnblogs.com/kongxp/p/9153040.html

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