計算屬性
計算屬性：顧明思議就是 計算并返回計算的結果 ，所以鸣峭，當我們要處理大量的邏輯论皆，但是最后只需要取得最后的結果的時候可以用 計算屬性 computed
在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這是一個簡單的 字符翻轉 處理蹋凝，但是我們自己在插槽里進行邏輯處理此時模板看起來將不再簡單柠硕，因此我們需要用計算屬性工禾，我們只需要把計算完的值展示就可以了，至于處理的邏輯我們需要在 computed 選項里進行
例如：
<div id="example">
<p>原始數據: "{{ message }}"</p>
<p>計算過的數據: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter （讀然热帷）
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
計算屬性 get 與 set （讀取與設置）
計算屬性默認只有get方法只能讀取闻葵，如果需要可以添加set方法
computed:{
add:function(){
return this.msg + 1
}
}
上面代碼等于下面的
computed:{
add:{
get:function(){
}
}
}
首先我們驗證下 計算屬性只有get方法，只能讀取不嫩設置值癣丧。
我們 創(chuàng)建一個 按鈕 點擊將 計算屬性值改變槽畔，如果沒有變則說明 計算屬性默認只有get方法不能設置值
{{reversemsg}}
<button @click="reversemsg ='helloWorld'">將reversemsg改為 helloWorld</button>
var vm = new Vue({
el:'#app',
data:{
msg:'hello',
},
computed:{
reversemsg:function(){ //默認get方法
return this.msg.split('').reverse().join('')
}
}
})
執(zhí)行結果，點擊按鈕 計算屬性 reversemsg 值根本沒變
查看演示
接下來我們?yōu)橛嬎銓傩蕴砑?set 方法
{{reversemsg2}}
<button @click="reversemsg2 ='你好世界'">將reversemsg2改為 你好世界</button>
var vm = new Vue({
el:'#app',
data:{
msg2:'你好',
},
computed:{
reversemsg2:{ //添加set方法
get:function(){
return this.msg2.split('').reverse().join('')
},
set:function(val){
console.log(val) //val 就是 設置計算屬性的值
return this.msg2 = val //改變計算屬性值其實就是改變源數據的值
}
}
}
})
執(zhí)行結果胁编，點擊按鈕 計算屬性 reversemsg2 值改成了 你好世界
查看演示
總結
- 什么情況下需要使用計算屬性
當我們要處理大量的邏輯厢钧，但是最后只需要取得最后的結果的時候可以用 計算屬性 - 如何使用計算屬性
創(chuàng)建計算屬性需要在 vue 實例 computed 選項里鳞尔，該選項是一個對象，里面?zhèn)魅雑son對象 key：函數,return出計算結果早直，該函數默認只有get方法只能讀取不能設置
comouted:{
fn1:function(){
return 邏輯處理
},
fn2:function(){
return 邏輯處理
}
...
}
如需設置值可傳入 set方法,該函數有一個參數就是 改變計算屬性的值寥假，
computed:{
fn:{
get:function(){
return
},
set:function(val){
//val 就是設置改變屬性的值 比如 fn = 1， val就是1
}
}
}
