computed：（計算屬性）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 13 <div id="app"> 14 <h1>{{firstName}}</h1> 15 <h1>{{lastName}}</h1> 16 <h1>{{fullName}}</h1> 17 <h1>{{ageGroup}}</h1> 18 <button type="button" @click="changeName">將 fullName 的修改成 '朱帥旗 . 克里斯蒂安'</button> 19 </div> 20 21 <script src="./vue.js"></script> 22 <script> 23 24 new Vue({ 25 data: { 26 firstName: '趙胤禎', 27 lastName: '尼古拉斯', 28 age: 60 29 }, 30 methods: { 31 changeName: function () { 32 this.fullName = '朱帥旗 . 克里斯蒂安' 33 } 34 }, 35 computed: { 36 // 計算屬性的完整用法 37 fullName: { 38 get: function () { 39 return this.firstName + ' . ' + this.lastName 40 }, 41 set: function (newFullName) { 42 newFullName = newFullName.split(' . ') // ['朱帥旗', '克里斯蒂安'] 43 this.firstName = newFullName[0] 44 this.lastName = newFullName[1] 45 } 46 }, 47 // 只需要 get 方法用法 48 /* 49 一般來說：0（初生）-6歲為嬰幼兒；7-12歲為少兒；13-17歲為青少年； 50 18-45歲為青年；46-69歲為中年；>69歲為老年。性質為分段。 51 */ 52 // ageGroup: { 53 // get: function () { 54 // if (this.age > 69) { 55 // return '老年' 56 // } else if (this.age >= 46) { 57 // return '中年' 58 // } else if (this.age >= 18) { 59 // return '青年' 60 // } else if (this.age >= 13) { 61 // return '青少年' 62 // } else if (this.age >= 7) { 63 // return '少兒' 64 // } else if (this.age >= 0) { 65 // return '嬰幼兒' 66 // } 67 // } 68 // }, 69 // 如果計算屬性不需要 set 方法，則可以簡寫成如下形式： 70 ageGroup: function () { 71 if (this.age > 69) { 72 return '老年' 73 } else if (this.age >= 46) { 74 return '中年' 75 } else if (this.age >= 18) { 76 return '青年' 77 } else if (this.age >= 13) { 78 return '青少年' 79 } else if (this.age >= 7) { 80 return '少兒' 81 } else if (this.age >= 0) { 82 return '嬰幼兒' 83 } 84 } 85 } 86 }).$mount('#app') 87 88 </script> 89 </body> 90 91 </html>
get：是獲取
set：是重新設置
一般只用get的時候，可以省略set
- 同時用set和get
computed: {
// 計算屬性的完整用法
fullName: {
get: function () {
return this.firstName + ' . ' + this.lastName
},
set: function (newFullName) {
newFullName = newFullName.split(' . ') // ['朱帥旗', '克里斯蒂安']
this.firstName = newFullName[0]
this.lastName = newFullName[1]
}
},
- 只用get，可以寫get，也可以省略get
ageGroup: function () {
if (this.age > 69) {
return '老年'
} else if (this.age >= 46) {
return '中年'
} else if (this.age >= 18) {
return '青年'
} else if (this.age >= 13) {
return '青少年'
} else if (this.age >= 7) {
return '少兒'
} else if (this.age >= 0) {
return '嬰幼兒'
}
}
補充理解：（vue）
data里面不必寫 sum，之前老忘記，導致報錯，set里面的參數就是sum的新值
<div id="app"> 價格：<input type="text" v-model.number="price"> 數量：<input type="text" v-model.number="num"> 總價 <input type="text"v-model.number='sum'> </div> <script src="vue.js"></script> <script> new Vue({ el:"#app", data:{ price:0, num:0, }, computed:{ // 對象方法的簡寫 嘿嘿，溫故 sum:{ get() { return this.price*this.num }, set(new1) { this.price= new1/this.num } } } }) </script>
不寫set方法時，可以簡寫成如下格式，直接是sum（）函數，這里的sum和要渲染的sum一樣，別在data選項對象里寫了，記住，老忘，嘿嘿
1 computed:{ 2 sum(){ 3 return this.num1+this.num2 4 } 5 }
1.計算屬性有一個get和set平常我們只用他的get是-一個簡寫
2.get的意思是通過別的數據得到這個計算屬性的值
3.set的意思是如果這個計算屬性的值發生變化就會觸發set方法參數（newValue就是sum改變后的值）
4.set什么時候會用到呢?計算屬性用在表單元素中的時候會用到這個set
這次理解的更深一點了