Vue 计算属性

2021-11-15 12:00:38 作者：互联网

插值语法实现

<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