其他分享
首页 > 其他分享> > Vue 计算属性

Vue 计算属性

作者:互联网

插值语法实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstname"><br>
        名:  <input type="text" v-model="lastname"><br>
        姓名:<span>
<!--        slice 截取firstname的前三位-->
        {{firstname.slice(0,3)}}-{{lastname}}
    </span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
    el:"#root",
    data:{
        firstname:"张",
        lastname:"三"
    }
})
</script>
</html>

methods语法实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstname"><br>
        名:  <input type="text" v-model="lastname"><br>
        姓名:<span>
        {{fullname()}}
    </span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
    el:"#root",
    data:{
        firstname:"张",
        lastname:"三"
    },
    methods:{
        fullname(){
            return this.firstname+'-'+this.lastname;
        }
    }

})
</script>
</html>

计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
1 计算属性不存在,要通过已有属性计算出来
2 原理:底层借助了getter和setter
3 优势:与methods相比,内部有缓存机制(复用),效率更高,调试方便
-->
<body>
    <div id="root">
        姓: <input type="text" v-model="firstname"><br>
        名:  <input type="text" v-model="lastname"><br>
        姓名:<span>
            {{fullname}}
    </span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
const vm=new Vue({
    el:"#root",
    data:{
        firstname:"张",
        lastname:"三"
    },
    //计算属性
    computed:{
        fullname:{
        //   get有什么作用 当有人读取fullname时,get就会被调用,且返回值就会作为fullname的值
        //    get什么时候调用 1初次读取fullname时 2所依赖的数据发生变化时
            get(){
                return this.firstname+'-'+ this.lastname
            },
            //set什么时候调用 当fullname被修改时
            set(name){
               const arr=name.split('-');
               this.firstname=arr[0];
               this.lastname=arr[1];
            }
        }
    }

})
</script>
</html>

计算属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstname"><br>
        名:  <input type="text" v-model="lastname"><br>
        姓名:<span>{{fullname}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
const vm=new Vue({
    el:"#root",
    data:{
        firstname:"张",
        lastname:"三"
    },
    //计算属性
    computed:{
        //完整写法
        // fullname:{
        //
        //     get(){
        //         return this.firstname+'-'+ this.lastname
        //     },
        //
        //     set(name){
        //        const arr=name.split('-');
        //        this.firstname=arr[0];
        //        this.lastname=arr[1];
        //     }
        // }

        //简写  只考虑读取 不考虑修改 即没有set方法
        fullname() {
            return this.firstname+'-'+ this.lastname
        }
    }

})
</script>
</html>

标签:arr,Vue,firstname,get,lastname,计算,fullname,属性
来源: https://www.cnblogs.com/lustudy/p/15555590.html