计算属性和侦听器

最新推荐文章于 2023-04-30 08:00:00 发布

哒玲

最新推荐文章于 2023-04-30 08:00:00 发布

阅读量368

点赞数

分类专栏： vue基础学习文章标签：计算属性侦听器

本文链接：https://blog.csdn.net/zl13015214442/article/details/87796804

版权

1. 计算属性–computed

官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现：

<body>
<div id="root">
  姓：<input v-model="firstName">
  名：<input v-model="lastName">
  <div>{
  {fullName}}</div>
</div>
<script>
  new Vue({
    el:"#root",
    data:{
      firstName:'',
      lastName:'',
    },
    computed:{   /*firstname和lastname没有发生改变时，
    computed不会重新计算，会保留上一次计算的缓存值*/
      fullName:function () {
        return this.firstName+''+this.lastName
      }
    }
  })
</script>
</body>

这里我们实现了数据的双向绑定，将firstName和lastName的变化和data绑定起来，而计算属性fullName又实时地将姓和名拼接起来进行显示：在这里插入图片描述
计算属性还有一个特点是具有缓存的作用，当计算属性所依赖的其他值没有

最低0.47元/天解锁文章

哒玲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性和侦听器

计算属性–computed官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现：&lt;body&gt;&lt;div id="root"&gt; 姓：&lt;input v-model="firstName"&gt; 名：&lt;input v-mod...
复制链接

扫一扫