计算属性（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）

猜你喜欢