SOURCE

console 命令行工具 X clear

                    
>
console
var vm = new Vue({
  el: '#app',
  data: function(){
    return {
      arr: [{arg: 'arr1', id: 0}, {arg: 'arr2', id: 1}, {arg: 'arr3', id: 2}],
      arr1: [1,2,3,4,5,6]
    }
  },
  methods: {
    changeArr: function(){
      // this.arr[this.arr.length] = {arg: 'arr1', id: 3}
      // this.arr.push({arg: 'arr4', id: 3})
      this.$set(this.arr, '3', {arg: 'arr4', id: 3})
      // Vue.set(this.arr, '3', {arg: 'arr4', id: 3})
    },
    newArrFun: function(){
      return this.arr1.filter(function(num){
         return num % 3 === 0
      })
    }
  },
  computed:{
    newArr: function(){
      return this.arr1.filter(function(num){
         return num % 2 === 0
      })
    }
  }
})
<div id="app">
  <ul>
    <li v-for="(item,index) of arr">{{item.id + '-' +  item.arg}}</li>
    <button @click="changeArr">click</button>
  </ul>
  <div v-for="(item,index) of newArr">{{item}}</div>
  <div class="bg" v-for="(item,index) of newArrFun(arr1)">{{item}}</div>
</div>
#app{
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  text-align: center;
}
.bg{
  background: red;
}