vue快速入门（二十二）修改计算属性

最新推荐文章于 2024-06-28 23:33:08 发布

代码对我眨眼睛

最新推荐文章于 2024-06-28 23:33:08 发布

阅读量635

点赞数 4

分类专栏： vue2 文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/m0_73756108/article/details/137374568

版权

vue2 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文详细解释了在Vue中如何使用`v-model.lazy`实现计算属性的懒加载，以及在需要修改计算属性时，如何正确使用`get`和`set`方法以确保性能优化。

摘要由CSDN通过智能技术生成

注释很详细，直接上代码

新增内容

当需要修改计算属性时应该采用的完整写法
设置双向绑定的懒加载

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
   <div>名字：<input type="text" v-model="firstName"></div>
   <div>姓氏：<input type="text" v-model="lastName"></div>
   <!-- 输入框绑定计算属性fullName，.lazy修饰符，输入框失去焦点时才更新 -->
   <div>姓名：<input type="text" v-model.lazy="fullName"></div>
  </div>
    <!-- 导入vue的js代码：不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          firstName:'压力山大',
          lastName:'眨眼睛'
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          // 正常情况下，计算属性的值是只读的，不能修改
          // 如果需要修改，需要使用set方法，也就是这里的完整写法
          fullName:{
            get(){// get方法，返回计算属性的值
              return this.firstName +'·'+ this.lastName
            },
            set(value){// set方法，修改计算属性的值，value为新的值
              const names = value.split('·')
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        }
      })
    </script>
</body>

</html>