這篇文章主要介紹了vue計算屬性get和set用法,結合實例形式分析了計算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下
本文實例講述了vue計算屬性get和set用法。分享給大家供大家參考，具體如下：
計算屬性是什麼：vue文檔裏是這麼說的，模板中綁定太多的邏輯會讓模板過重且難以維護。
換句話說，就是可以自己設置值（b值），這個值和data下定義的值（a值）存在某些關係，b的值是基於a的值，通過某些邏輯產生出來的值，b值可以直接拿到template裏去用。當a的值發生變化的時候，b的值會跟着變化。就是計算屬性中的默認值get。那set又是什麼鬼？
b的值是基於a的變化而變化的，那麼直接修改b的值的時候，會怎麼樣？這裏會走進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的值是：{{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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：
希望本文所述對大家vue.js程序設計有所幫助。