SOURCE

new Vue({
  el:'#app',
  
  data:{
    movies2:[{movie:'我不是药神',rate:'9.0'}, {movie:'你是药神',rate:'6.0'},
            {movie:'我是药神又怎样',rate:'7.0'}, {movie:'你不是药神又怎样',rate:'9.0'}],
    addVersion:1,
    arr:[1,2,3]
  },
  methods:{
    // 第一点，不能直接改变数组
    change:function(index){
      let arr  = this.movies2.concat();
      arr[index]={
        movie:'朕知道了', 
        rate:'9.0'
      };
      this.movies2 = arr;
    },
    
    //第二点：push、pop等方法却可以直接改变数组
    add:function(){
      this.movies2.push({
        movie:'来了老弟' + this.addVersion++, 
        rate:'9.0'
      });
    },
    reverse:function(){
      this.arr.reverse();
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <ul>
    <li  v-for='(movie,index) in movies2' @click='change(index)'>{{index}}:{{movie.movie}} | {{movie.rate}}</li>
  </ul>
  <button @click='add'>add</button>
  <!-- 第三点：也可以使用template -->
  <template v-for='item in arr'>
    <p>{{item}}</p>
    <!-- 第四点：如果没有绑定key这个值，则因为模板一样，所以倒置时输入框不会一起倒置 -->
    <input type="text" :key='item'/>
  </template>
  <button @click='reverse'>reverse</button>
</div>