vue計算屬性get和set用法示例
更新時間：2019年02月08日 11:55:49 作者：cofecode
這篇文章主要介紹了vue計算屬性get和set用法,結(jié)合實(shí)例形式分析了計算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下
本文實(shí)例講述了vue計算屬性get和set用法。分享給大家供大家參考，具體如下：
計算屬性是什么：vue文檔里是這么說的，模板中綁定太多的邏輯會讓模板過重且難以維護(hù)。
換句話說，就是可以自己設(shè)置值（b值），這個值和data下定義的值（a值）存在某些關(guān)系，b的值是基于a的值，通過某些邏輯產(chǎn)生出來的值，b值可以直接拿到template里去用。當(dāng)a的值發(fā)生變化的時候，b的值會跟著變化。就是計算屬性中的默認(rèn)值get。那set又是什么鬼？
b的值是基于a的變化而變化的，那么直接修改b的值的時候，會怎么樣？這里會走進(jìn)set方法里去。
總之一條：b的值始終是依賴a的值存在和變化的。最后渲染出來的a為100，b為110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue計算屬性get和set</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>a的值是：{{a}}</p>
<p>b的值是：{}</p>
<button @click="change">按鈕</button>
</div>
<script>
new Vue({
el: '#app',
data:{
a:1
},
computed: {
b: {
// getter
get: function () {
return this.a + 10
},
// setter
set: function (val) {
this.a = val
}
}
},
methods:{
change() {
this.b = 100
}
}
})
</script>
</body>
</html>
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI之Tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
vue如何通過props方式在子組件中獲取相應(yīng)的對象
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)購物車場景下的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車場景下的應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue腳手架項目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
vue組件之間通信方式實(shí)例總結(jié)【8種方式】
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項,需要的朋友可以參考下2019-02-02
Vue+mui實(shí)現(xiàn)圖片的本地緩存示例代碼
這篇文章主要介紹了Vue+mui實(shí)現(xiàn)圖片的本地緩存的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
雙端Diff在可以解決更多簡單Diff算法處理不了的場景，且比簡單Diff算法性能更好。本文主要來和大家詳細(xì)講講Vue2中的雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2023-02-02