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;
}