1. 程式人生 > >Vue 2.0 隨記

Vue 2.0 隨記

lis info col pan 百度翻譯 技術分享 clas opened view

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 隨記