vue计算属性的getter和setter以及set方法的使用

2020-01-06 本文已影响0人 nzdnllm

示例：使用计算属性

<div id="app">{{fullName}}</div>
<script>
    var vm = new Vue({
        el : "#app",
        data: {
            firstName: "Denny",
            lastName: "Zhang"
        },
        computed:{
            fullName:function () {
                return this.firstName + " " + this.lastName
            }
        }
    })
</script>

先去data中找fullName，没有找到会到计算属性中去找fullName，通过计算得出fullName 为 Denny Zhang

computed的特性：当他依赖的值发生变化的时候会重新计算其属性

计算属性支持get和set方法，如下：

<div id="app">{{fullName}}</div>
<script>
    var vm = new Vue({
        el : "#app",
        data: {
            firstName: "Denny",
            lastName: "Zhang"
        },
        computed:{
            fullName:{
                get:function () {
                    return this.firstName + " " + this.lastName
                },
                set:function (value) {
                    var arr = value.split(" ");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                    console.log(value)
                }
            }
        }
    })

示例：显示一个对象的数据

<div id="app">
    <div v-for="(item,key,index) of userInfo">
        {{item}} --- {{key}} --- {{index}}
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#app",
        data :{
            userInfo:{
                name : "Denny",
                age :28,
                gender : "male",
                salary : "secret"
            }
        }
    })