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
这次理解的更深一点了