vue v-for的数组改变导致页面不渲染解决方法

直接在数组里,改变数组来达到重新渲染页面的目的,

需要用push等数组方法,

或者$set(),或者给数组重新赋值,来改变数组引用地址

而是直接索引=

<body>
<div id="app">
<li v-for='item in students'>
<span>{{ item.name }}</span>
<span>{{ item.age }}</span>
</li>
<button @click='addStudent'>click</button>
<button @click='$set(students,3,{name:"xioaming",age:102333})'>click</button>
<button @click='Vue.set(students,3,{name:"xioaming",age:102333})'>click</button>
    </div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
students: [
{name:"xioaming",age:10},
{name:"xioaming",age:101},
{name:"xioaming",age:102}
]
},
methods: {
addStudent: function(){
this.students[3] = {name:"xioaming",age:102333}//这样不能重新渲染页面
this.students.push({name:"xioaming",age:102333})
} } }) </script>

vue v-for的数组改变导致页面不渲染解决方法

上一篇:java 数组去重总结


下一篇:vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题