- <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 指令如果渲染的对象没有改变地址, 则不会重新渲染
来源: http://www.bubuko.com/infodetail-2893153.html