深度响应式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

一。深度响应式(响应式：数据发生改变，页面自动更新)

1.$set(如果要给对象添加属性，并且具备响应式，需要使用$set)

①。可以看到直接添加有数据，单数不具备响应式，页面没有更新数据 ②。$set(如果要给对象添加属性，并且具备响应式，需要使用$set)

       this.$set(this.student, "sex", "男");

2.$delete(通过$delete方法删除对象属性，同时具备响应式)

 this.$delete(this.student, "age");

3. 操作数组并具备响应式，只能使用数组的以下7个方法

     pop,push,shift,unshift,reverse,sort,splice
     
   

3.1 $set给数组添加内容

①。js的push和unshift添加

this.arr.push("最后添加香蕉")
 this.arr.unshift("最前面添加榴莲")

②。$set给数组添加内容

 this.$set(this.arr,this.arr.length,"猫山王") //在数组最后一位添加内容

3.2$set替换数组内容

           // js数组方法
        //   this.arr.splice(1,2,"大橘子")

        // $set方法
        this.$set(this.arr, 1, "大橘子");

3.3$delete删除数组内容

           // 删除数组下标为1的内容

        //   js数组方法
        //   this.arr.splice(1,1)
        this.$delete(this.arr, 1);

二。选项卡

       <div class="root">
  <ul>
    <li
      v-for="(item,index) in arr"
      :key="item.id"
      :class="{active:activeIndex==index}"
      @click="activeIndex=index"
    >
      <p>{{item.name}}</p>
    </li>
  </ul>
  <hr />
  <ul>
    <li>{{full}}</li>
  </ul>
</div>

//计算属性(也依赖的数据发生变化时，也会跟着变化)
  computed: {
      full() {
        //   返回数组arr的高亮索引下标的addree的内容
          return this.arr[this.activeIndex].address
      },
    },

点击城市，城市有高亮索引，且会更具高亮索引下标显示对应的城市内容