computed计算属性（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 '婴幼儿'
                    }
                }
 
 
 
 
补充理解：（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

 

这次理解的更深一点了

posted @ 2020-02-09 14:04  张尊娟  阅读(2819)  评论(6)  编辑  收藏  举报