03_计算属性和监视

最新推荐文章于 2023-10-11 21:08:23 发布

猪小屁、

最新推荐文章于 2023-10-11 21:08:23 发布

阅读量47

点赞数

分类专栏： Vue_基础知识文章标签： vue.js html

本文链接：https://blog.csdn.net/weixin_47952737/article/details/120599362

版权

Vue_基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算

  getter:属性的get方法
  setter:属性的set方法
-->
<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>

  <!-- 
    计算属性存在缓存, 多次读取只执行一次getter计算
    因此下面这两行不会再调用fullName1的get方法
  -->
  <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: {
      //什么时候执行：初始化显示/相关的data属性数据发生改变
      fullName1 () { // 计算属性中的一个方法，方法的返回值作为属性值
        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>
</body>
</html>

猪小屁、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03_计算属性和监视

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_HelloWorld</title></head><body><!-- 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定
复制链接

扫一扫