vue中的计算属性和侦听器

最新推荐文章于 2024-05-30 16:11:37 发布

增伟

最新推荐文章于 2024-05-30 16:11:37 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：侦听器 vue vue计算

本文链接：https://blog.youkuaiyun.com/weixin_42645212/article/details/81204472

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue.js中计算属性(computed)和侦听器(watch)的使用方法。计算属性可以根据其他属性动态计算结果并缓存，提高效率；侦听器则用于监听特定数据变化并作出响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性

<div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data{
            firstName='',
            lastName=''
        },
        computed{
            fullName:function(){
                return this.firstName +' '+ this.lastName
            }
        }
    })
</script>

computed：指的是一个属性通过其他属性计算而来

好处：如果firstName和lastName没改变，每次在使用fullName时，会使用上一次计算结果的缓存结果。

侦听器

侦听器是用来监听某一个数据的变化。

定义侦听器用 watch：{ }

例如现在有一个需求，需要显示改变次数，也就是当对姓或者名进行变更时，计数加1

这时候定义一个count初始值为0，每次fullName改变，侦听器会对count进行加1操作。

<div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data{
            firstName='',
            lastName=''，
            count=0
        },
        computed{
            fullName:function(){
                return this.firstName +' '+ this.lastName
            }
        },
        watch:{
            fullName:function(){
                this.count++
            }
        }
    })
</script>