从vue渲染想到的数组方法

时间:2023-12-04 15:35:44
   <div id="app">
<ul>
<li v-for='item in goods'>{{item}}</li>
</ul> <div>{{a}}</div> <button v-on:click='demo'>click</button>//由于js的弱点导致的,vue无法检测到数组内部的变化,只能检测到地址变化
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
goods: ['aa', 'bb', 'cc', 'rrr']
},
methods: {
demo: function () {
this.goods=this.goods.concat(1,2,3)//改变原数组,能重新渲染
this.goods.concat(1,2,3)//不改变原数组,不能重新渲染
this.goods.splice(1)//splice方法能够改变原数组会重新渲染
Vue.set(this.goods,1,'fff')//用set方法 能够检测到到变化 }
}
})
</script>

v-for指令如果渲染的对象没有改变地址,则不会重新渲染

从vue渲染想到的数组方法

从vue渲染想到的数组方法