微信扫一扫打赏支持

VUE参考---计算属性和watch

VUE参考---计算属性和watch

一、总结

一句话总结：

计算属性：在computed属性对象中定义计算属性的方法，可以直接一个函数（只有get），或者一个对象（有get和set）
watch：通过vm对象的$watch()或watch配置来监视指定的属性
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    watch: {
      // 配置监视firstName
      firstName: function (value) { // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    console.log('$watch lastName', value)
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

</script>

 

 

 

1、watch属性设置方式？

1、在vm实例定义内的watch对象上设置
2、在vm实例的$watch方法上设置
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    watch: {
      // 配置监视firstName
      firstName: function (value) { // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    console.log('$watch lastName', value)
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

</script>

 

 

2、计算属性设置方式？

1、可以直接一个函数：fullName1 (){}
2、可以用对象的方式设置get和set：fullName3：{get (){},set(){}}
    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

 

 

 

二、计算属性和watch

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>03_计算属性和监视</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 计算属性
10   在computed属性对象中定义计算属性的方法
11   在页面中使用{{方法名}}来显示计算的结果
12 2. 监视属性:
13   通过通过vm对象的$watch()或watch配置来监视指定的属性
14   当属性变化时, 回调函数自动调用, 在函数内部进行计算
15 3. 计算属性高级:
16   通过getter/setter实现对属性数据的显示和监视
17   计算属性存在缓存, 多次读取只执行一次getter计算
18 -->
19 <div id="demo">
20   姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
21   名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
22   <!--fullName1是根据fistName和lastName计算产生-->
23   姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
24   姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
25   姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
26 
27   <p>{{fullName1}}</p>
28   <p>{{fullName1}}</p>
29 </div>
30 
31 <script type="text/javascript" src="../js/vue.js"></script>
32 <script type="text/javascript">
33   const vm = new Vue({
34     el: '#demo',
35     data: {
36       firstName: 'A',
37       lastName: 'B',
38        fullName2: 'A-B'
39     },
40 
41     // 计算属性配置: 值为对象
42     computed: {
43       fullName1 () { // 属性的get()
44         console.log('fullName1()', this)
45         return this.firstName + '-' + this.lastName
46       },
47 
48       fullName3: {
49         // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
50         get () {
51           console.log('fullName3 get()')
52           return this.firstName + '-' + this.lastName
53         },
54         // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
55         set (value) {// fullName3的最新value值  A-B23
56           console.log('fullName3 set()', value)
57           // 更新firstName和lastName
58           const names = value.split('-')
59           this.firstName = names[0]
60           this.lastName = names[1]
61         }
62       }
63     },
64 
65     watch: {
66       // 配置监视firstName
67       firstName: function (value) { // 相当于属性的set
68         console.log('watch firstName', value)
69         // 更新fullName2
70         this.fullName2 = value + '-' + this.lastName
71       }
72     }
73   })
74 
75   // 监视lastName
76   vm.$watch('lastName', function (value) {
77     console.log('$watch lastName', value)
78     // 更新fullName2
79     this.fullName2 = this.firstName + '-' + value
80   })
81 
82 </script>
83 </body>
84 </html>

 

 

 

 

 

 
posted @ 2020-04-20 06:55  范仁义  阅读(337)  评论(0)  编辑  收藏  举报