Vue 計算屬性

2022-03-13 21:51:56 字數 3764 閱讀 3257

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="vue.min.js"


>


script


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


}    


div>


<


div 


id>


}    


div>


<


script


>


var=


newvue(


});var=


newvue(,


computed: }})


script


>


body


>


html


>
在乙個計算屬性裡面可以完成各種複雜的邏輯，包括運算、函式呼叫等只要最終返回乙個結果就可以了。

除此之外，計算屬性還可以依賴多個vue例項的資料，只要其中乙個資料變化，計算屬性就會重新執行。

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="vue.min.js"


>


script


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


總價：}


div>


<


script


>


var=


newvue(,


],package2: [,]


},computed:


for(


varj =0


; j 


<


this


.package2.length; j


++) 


return


prices}}


})script


>


body


>


html


>
效果：

每乙個計算屬性都包含乙個getter和乙個setter，預設只利用getter。

當我們要手動修改計算屬性的時候，就可以定義乙個setter，這樣在修改計算屬性的時候就會自動觸發setter。

絕大多數情況下只會用到getter，所以不需要將二者都進行宣告。

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="vue.min.js"


>


script


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


姓名：}


div>


<


script


>


var=


newvue(,


computed: ,


set: 


function


(newvalue) }},


})script


>


body


>


html


>
此外，計算屬性還可以依賴其它計算屬性，而且可以依賴其它vue例項的資料。

我們發現使用methods也可以實現相同的效果，二者到底有什麼不同？

計算屬性是基於它的依賴快取的，乙個計算屬性所依賴的資料發生變化時，他才會重新取值，所以只要text不改變，計算屬性就不會發生改變.

使用計算屬性還是methods取決於你是否需要快取，當遍歷大陣列和需要進行大量計算時應當使用計算屬性。

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="vue.min.js"


>


script


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>}


div>


<


div 


id>}


div>


<


script


>


var=


newvue(,


methods: 


}});


var=


newvue(,


computed: }})


script


>


body


>


html


>



<


div 


id>


}div


>


<


script


>


var=


newvue(,


//computed: 


//},


//methods: 


//},


watch: ,


lastname: 


function


()         }


})script


>

vue 計算屬性

在這裡我覺得講 computed 和methods放在一起討論 更 便於 理解。computed var vm new vue computed methods methods methods和computed從顯示效果是一樣的，但是主要的區別是 1.computer 是存在快取的，在data沒有改...

Vue 計算屬性

計算屬性在處理一些複雜邏輯時是很有用的。模板是為了描述檢視的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 vue.js 將繫結表示式限制為乙個表示式。如果需要多於乙個表示式的邏輯，應當使用計算屬性 computed。例項1 反轉字串 例項1中模板複雜，不好理解，現在我們採用計算屬...

Vue計算屬性

計算屬性 在模板中繫結表示式是非常便利的，但是它們實際上只用於簡單的操作。如果需要多於乙個表示式的邏輯，應當使用計算屬性。1.基礎例子 a b js var vm new vue computed 結果 a 1,b 2 這裡我們宣告了乙個計算屬性b。我們提供的函式將用作屬性vm.b的getter。c...