您的位置：首页 > Web前端 > Vue.js

vue数组更新了但是视图view没有更新的问题

2018-04-25 14:24 302 查看

先来个vue的知识点

数组更新检测

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你打开控制台，然后用前面例子的 

items
 数组调用变异方法：
example1.items.push({ message: 'Baz' })
 。

替换数组

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：

filter()
, 
concat()
 和 
slice()
 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。


你也可以到 官网 查询知识点

再来实例，深入理解用用

html:
<ul>
<li v-for="(item ,index) in evaluate" :class="{active:item==1}" @mouseover="chooseEvaluate(index,evaluate)" @click="chooseEvaluate(index,evaluate)"></li>
</ul>


less:
ul{
  height: 20px;
  margin-bottom: 20px;
  li{
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
float:left;
background: url(../img/kongxinxx.png);//默认空心
  }
  li.active{
background: url(../img/shixinxx.png);//active是实心
  }
}




js:
export default {
data(){
return{
arr:[1,1,0,0,0],//1是代表实心，0是代表空心
}
},
methods:{
chooseEvaluate(index,arr){
this.arr=this.changeArr(index,arr);
this.arr.push();//更新数组view
}，
//根据当前index修改数组
changeArr(index,arr) {
  for(let i in arr){
if(i<=index){//小于当前点击的都是1
  arr[i]=1
}else {//否则，大于当前的都是0
  arr[i]=0
}
  }
  return arr
}
}
} 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航