Vue 计算属性 computed

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>{{firstName+'•'+lastName}}</p>
        <p>----------函数----------</p>
        <p>{{getFullName()}}</p>
        <p>{{getFullName()}}</p><!-- 会再次执行调用函数运算 -->
        <p>----------计算属性----------</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p><!-- 先进行检查缓存,存在则直接拿第一次计算的缓存,不再进行再次运算 -->
        <p>{{fullName_}}</p>
        <p>{{totalScore}}</p>

    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！',
                    firstName: '乔治',
                    lastName: '希尔',
                    members:[
                        {id:1,name:"张三",score:13232},
                        {id:2,name:"李四",score:14232}
                    ]
                }
            },
            //计算属性
            computed:{
                /*细节:本质上还是属性,写法如函数,命名如属性*/
                fullName(){
                    console.log("========fullName=========")
                    return this.firstName+'•'+this.lastName;
                },
                fullName_:{
                    set(arg1){
                        console.log("-------set()--------");
                        const nameArr = arg1.split("•");
                        this.firstName=nameArr[0];
                    },
                    get(){
                        console.log("------get()-------");
                        return this.firstName+'•'+this.lastName;
                    }
                },
                totalScore(){
                    let total=0;
                    for(let member of this.members){
                        total+=member.score;
                    }
                    return total;
                }
            },
            methods:{
                getFullName(){
                    console.log("---------getFullName-----------");
                    return this.firstName+'•'+this.lastName;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

 

posted @ 2021-08-16 11:54  残星  阅读(38)  评论(0)    收藏  举报