本文實例講述了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.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行結果：
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
