計算屬性在處理一些複雜邏輯時是很有用的。
模板是爲了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是爲什麼 Vue.js 將綁定表達式限制爲一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性：computed。
實例1：反轉字符串
<html lang="en"> <head> <meta charset="utf-8"> <title>hellodemo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> </style> </head> <body> <!--文本--> <div id="app"> <p>{{ message }}</p> </div> <!--反轉字符串reversal--> <div id="reversal"> {{ message.split('').reverse().join('') }} </div> <!--屬性--> <script> new Vue({ el:'#reversal', data:{ message:'reversal', } }) </script> </body> </html>實例1中模板複雜，不好理解，現在我們採用計算屬性的方式
聲明一個reversalMessage,提供的函數將用作屬性 vue.reversedMessage 的 getter 。
實例2：使用計算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hellodemo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!--反轉字符串reversal-->
<div id="reversal">
<p>原始字符串：{{ message }}</p>
<p>計算後反轉的字符串：{{reversalMessage}}</p>
</div>
<!--屬性-->
<script>
var vue = new Vue({
el:'#reversal',
data:{
message:'reversal',
},
computed:{
//計算屬性的getter方法
reversalMessage:function () {
//this指向Vue的實例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
computed與methods的區別：
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hellodemo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!--反轉字符串reversal-->
<div id="reversal">
<p>原始字符串：{{ message }}</p>
<p>計算後反轉後的字符串：{{reversalMessage}}</p>
<p>使用方法後反轉字符串：{{reversalMethodMessage()}}</p>
</div>
<!--屬性-->
<script>
new Vue({
el:'#reversal',
data:{
message:'reversal',
},
computed:{
//計算屬性的getter方法
reversalMessage:function () {
//this指向Vue的實例
return this.message.split('').reverse().join('')
}
},
methods:{
reversalMethodMessage:function () {
return this.message.split('').reverse().join('')
}
},
})
</script>
</body>
</html>
實例3 computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hellodemo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!--computed setter-->
<div id="setter">
{{setter}}
</div>
</div>
<!--屬性-->
<script>
var vue = new Vue({
el:'#setter',
data:{
name:'hxl',
age:'20',
},
computed:{
setter:{
//getter
get:function () {
return this.name + ',' + this.age
},
//setter
set:function (newValue) {
var values = newValue.split(',')
this.name = values[0]
this.age = values[values.length-1]
}
}
}
})
// 調用 setter， vue.name 和 vue.url 也會被對應更新
vue.setter = 'hxl,25'
document.write('name: ' + vue.name);
document.write('<br>');
document.write('age: ' + vue.age);
</script>
</body>
</html>