Vue系列入门教程(4)——计算属性与侦听器

Web前端 潘老师 4年前 (2020-09-02) 2250 ℃ (0) 扫码查看

利用computed实现属性计算,代码案例如下:

<div id="app">
    姓:<input type="text" v-model="firstName" />
    名:<input type="text" v-model="secondName" />
    全名:{{fullName}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:"",
            secondName:""
        },
        //属性计算:只有在依赖的数据发生改变是才会重新计算,未改变则使用之前计算的缓存结果
        computed:{
            fullName:function(){
                return this.firstName+this.secondName;
            }
            /* 或这样写也可
            fullName(){
                return this.firstName+this.secondName;
            } */
        }
    });
</script>

效果:
Vue系列入门教程(4)——计算属性与侦听器

侦听器指的是监听某个数据或计算属性发生变化,可以触发相关的操作,这里使用watch去侦听
需求:在上面案例的基础上,我们需要统计姓名被修改的总次数

<div id="app">
    姓:<input type="text" v-model="firstName" />
    名:<input type="text" v-model="secondName" />
    全名:{{fullName}}
    总次数:{{count}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:"",
            secondName:"",
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.secondName;
            }
        },
        //侦听器
        watch:{
            //侦听firstName变化
            /* firstName:function(){
                this.count++;
            },
            //侦听secondName变化
            secondName:function(){
                this.count++;
            } */
            //也可简化为直接对fullName侦听
            fullName:function(){
                this.count++;
            }
        }
    });
</script>

效果:
Vue系列入门教程(4)——计算属性与侦听器


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/945.html
喜欢 (12)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】