Vue计算属性computed之get、set

最新推荐文章于 2025-10-11 10:08:08 发布

转载最新推荐文章于 2025-10-11 10:08:08 发布 · 324 阅读

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的双向数据绑定示例，展示了如何通过firstName和lastName的输入来实时更新fullName，并反之亦然。此案例利用Vue的computed属性进行数据计算，实现了姓和名之间的动态关联。

1、需求

当姓或者名的改变时，姓名改变；

当姓名改变时，姓或者名改变；

注：姓名框中，姓和名之间用空格隔开

2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="demo">
    姓: <input type="text" v-model="firstName">
    名: <input type="text" v-model="lastName">
    姓名 <input type="text" v-model="fullName">
  </div>
  <script>
    const vm = new Vue({
      el:"#demo",
      data:{
        firstName:'A',
        lastName:'B'
      },
      computed:{
        fullName:{
          //回调函数的3个特点：你定义的；你没有调用；但它最终执行了
          //关于回调函数，需要知道：什么时候调用；用来做什么
          //回调函数   当需要读取当前属性值fullName时回调，根据相关的数据计算（此处为firstName、lastName）并返回当前属性的值
          get(){
            return this.firstName +' ' +this.lastName
          },
          //回调函数  监视当前属性值fullName的变化，当属性值fullName发生改变时回调，更新相关的属性数据（此处为firstName、lastName）
          set(value){//value为fullName的新值
              const names = value.split(' ')
              this.firstName = names[0]
              this.lastName = names[1]
          }
        }
      }
    })
  </script>

</body>
</html>