计算属性（get和set）
Posted wszzj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了计算属性（get和set）相关的知识，希望对你有一定的参考价值。
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 ‘婴幼儿‘
}
}
以上是关于计算属性（get和set）的主要内容，如果未能解决你的问题，请参考以下文章