示例：使用計(jì)算屬性

<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，沒(méi)有找到會(huì)到計(jì)算屬性中去找fullName，通過(guò)計(jì)算得出fullName 為 Denny Zhang

computed的特性：當(dāng)他依賴的值發(fā)生變化的時(shí)候會(huì)重新計(jì)算其屬性

計(jì)算屬性支持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)
                }
            }
        }
    })

示例：顯示一個(gè)對(duì)象的數(shù)據(jù)

<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"
            }
        }
    })

向?qū)ο笾刑砑訑?shù)據(jù)的兩種方法

1.給對(duì)象重新賦值

直接給對(duì)象重新賦值

2.使用vue的set方法

使用Vue的set方法

Vue的set方法既是Vue的全局方法也是Vue的實(shí)例方法

image.png

set方法用戶數(shù)組操作

操作數(shù)組我們之前可以用數(shù)組的變異方法和數(shù)組的引用，此次使用set方法直接將某個(gè)下標(biāo)的數(shù)據(jù)修改成自己想要的數(shù)據(jù)頁(yè)面就跟著變化

image.png