Vue学习笔记（四）计算属性和侦听器

最新推荐文章于 2020-11-01 23:41:40 发布

DF11G_0001

最新推荐文章于 2020-11-01 23:41:40 发布

阅读量104

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/DF11G_0001/article/details/107387119

版权

Vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

计算属性：

当对data中的数据进行计算时，使用computed：属性进行计算。

该属性将计算属性对应为一个函数，返回计算后的新数据。

<body>
    <div id="root">
        firstName:<input v-model="firstName"/>
        lastName:<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> 
</body>

显示结果：

当参与计算的属性未发生改变时，计算结果会直接使用计算好的缓存值，而不用重新计算。

侦听器

作用：监听某些数据的变化

使用watch属性，同样使用函数

<body>
    <div id="root">
        firstName:<input v-model="firstName"/>
        lastName:<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>   
</body>

实现效果：可以计算数据更改的次数。

DF11G_0001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（四）计算属性和侦听器

计算属性：当对data中的数据进行计算时，使用computed：属性进行计算。该属性将计算属性对应为一个函数，返回计算后的新数据。<body> <div id="root"> firstName:<input v-model="firstName"/> lastName:<input v-model="lastName"/> <div>{{fullName}}</div&g
复制链接

扫一扫

专栏目录