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

Web前端 潘老师 5个月前 (09-02) 467 ℃ (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)——计算属性与侦听器


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (10)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!