SOURCE

new Vue({
  el:"#app",
  data:{
    movies : [{
      movie:"我的少女时代",
      rate:'8.9'
    },{
      movie:"初恋这件小事",
      rate:'9.0'
    },{
      movie:"何以为家",
      rate:'9.2'
    },{
      movie:"我的我的祖国",
      rate:'9.5'
    }],
    person:{
      name:"chunduo",
      age:"18",
      sex:"女"
    },
    arr:[1,2,3]
  },
  methods:{
    changeMovie:function(index){
      // this.movies[index]={
      //   movie:"可可西里",
      //   rate:"8.9"
      // }
      // console.log(this.movies);//上述方法中，在检查元素中，数组内容发生更改，但是，无法检测到更改后的内容：于浏览器而言相当于没有更改。
      let arr=this.movies.concat()//复制，将movies数组复制给arr,改变内存地址
      arr[index]={
         movie:"可可西里",
        rate:"8.9"
      }
      this.movies=arr;
      //将arr新数组的内存地址赋值给movies；相当于重新加载movies数组
    },
    reverse:function(){
      this.arr.reverse();
    }
  }
})
//数组元素内容直接发生改变，是无法检测到的；但如果给数组增加或删除元素时，是可以的。
//那是因为push被vue重写了（还有许多被重写的方法，eg:reverse：可以查资料）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 列表渲染 -->
<div id="app">
  <ul>
    <!--for循环遍历（items是自定义的变量）-->
    <!--  <li v-for="items in movies">{{items}}</li> -->
    <!--i为循环遍历索引值-->
    <li v-for="(item,i) in movies" @click="changeMovie(i)">{{item.movie}}|{{item.rate}}|{{i}}</li>
    <!--由于很多情况下，数组传入中的可能是一个对象-->
  </ul>
  <!--注：三个变量都是自定义命名的。
  value变量指当前属性值、prop变量指当前属性名、index变量指当前索引值-->
<template v-for="(value,prop,index) in person">{{value}}/{{prop}}/{{index}}</template>
  <p v-for="items in 'wuchudnuo'">{{items}}</p>
  <p v-for="items in 5 ">{{items}}</p>
  <template v-for="item1 in arr"><p>{{item1}}</p>
    <input type="text" :key="item1"></template>
  <!-- 将input框认为是一样的 -->
  <!-- 绑定key属性；当key属性不同时，代表不同的input框-->
  <button @click="reverse">倒置</button>
</div>
<!-- 数组内存地址没有改变 -->