【VUE-学习03】computed

最新推荐文章于 2022-04-12 18:21:47 发布

六碗铁biu_

最新推荐文章于 2022-04-12 18:21:47 发布

阅读量90

点赞数

分类专栏：【**Vue**】文章标签： vue

本文链接：https://blog.csdn.net/qq_30042269/article/details/99721245

版权

【**Vue**】专栏收录该内容

16 篇文章 0 订阅

订阅专栏

相比于methods，computed仅在数据改变时才会调用，能够提高性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id='app'>
        {{fullName}}
        {{age}}

    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    var vm =  new Vue({
        el:'#app',
        data:{
            firstName:'Mona',
            LastName:'Lee',
            age:'15'
        },
        //仅数据改变才重新调用,提高性能
        computed:{
            fullName:{
                //使用fullName就是调用get
                get: function(){
                    console.log('get call!');
                    return this.firstName+' '+this.LastName
                },
                //fullName改变时触发
                set: function(value){
                    console.log('set call!');
                    this.firstName = value.split(' ')[0];
                    this.LastName = value.split(' ')[1];
                }
            }
            
        },
        // watch:{
        //     firstName:function(){
        //         this.fullName = this.firstName+' '+this.LastName;
        //     },
        //     LastName:function(){
        //         this.fullName = this.firstName+' '+this.LastName;
        //     }
        // }
        
    });
</script>

</html>

六碗铁biu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【VUE-学习03】computed

相比于methods，computed仅在数据改变时才会调用，能够提高性能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> ...
复制链接

扫一扫