iT邦幫忙

0

從Vue 的新手走路 - computed 學習筆記

建立虛擬屬性-由狀態組合而成

從 文件上面看

計算屬性的結果會被緩存,除非依賴的響應式屬性變化才會重新計算。注意,如果某個依賴(比如非響應式屬性)在該實例範疇之外,則計算屬性是不會被更新的。

image

在 data 的資料 是這樣呈現:
假設我在實體資料存了 價錢 打折和稅的資料,
我可能得在 vue 的輸出畫面 呈現 {{ fullPricediscountfee}}
但是如在很多地方都要放這個計算過後的資料,就會顯得很麻煩,
所以虛擬一個資料庫 放計算過後的資料(這個資料並不存在,是我們虛擬而成的)
直接叫做 {{price}} 。

data:{
 fullPrice:5000,
 discount:0.8,
 fee:100
}

1.計算價格

 <h3>
 {{ price }} 
 </h3>
data:{
    fullPrice: 5000,
    discount: 0.8,
    fee: 100
},
computed: {
    price(){
        let temp = this.fullPrice*this.discount
        return temp+this.fee   //4100
    }
}

2.組合名字

 <h3>
 {{ fullName }}
 </h3>

 data:{
    lastName: "Wang",
    firstName: "Lala",
    
},
   computed:{
    fullName(){
        let fullName = this.lastName+this.firstName;
        return  fullName
   }
 }
   
  

3.組合CSS

<h3 :style="themstyle"> text</h3>

data:{
    bgColor: "yellow",
    textColor: "black",
    
},

 computed:{
   themstyle(){
     return {
       "background-color":this.bgColor,
       "color":this.black
     }
   }

雙向計算屬性

自訂取、給值規則

  • getter 自訂取得的實際運作
  • setter 設定的實際運作
    在取得 / 設定時觸發額外動作

在模擬層我們經過計算 取出來的值,是我們getter 到的
而我們輸入值 fullName 在模擬層經過計算拆成 firstName LastName 放在實際資料庫 則是setter,
之前前面的案例,都是getter,那接下來是要教模擬層 幫我們拆解setter設定到實際資料。

image

監看改變-watch

  • 變數發生變化時偵測觸發
    傳入引數-改變後 / 改變前
    e.g. 使用者輸入 / 改變資料 / 登入… 等
<input v-model="count" />
data:{
    count: 10
},
watch: {
    count( newValue , oldValue ){
       console.log(newValue + "->" + oldValue) //10->15
       console.log("值被改變了!") 
    }
}

資料來源:動畫互動網頁特效入門
Vue 手冊


尚未有邦友留言

立即登入留言