五 vue列表渲染

1、v-for

<div id="app">
  <div v-for="item in items">
    {{item.name}}
  </div>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    items:[
	  {name:'jack'},
	  {name:'dool'},
	  {name:'look'}
	]
  }
});
</script>

2、v-for的序号

类似jstl里也有一个索引，v-for的索引命名是v-for="(item,index) in items"

3、循环对象

<div id="app">
  <div v-for="value in obj">
  {{value}}
  </div>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
	obj:{name:'jack',sex:'男',age:'16'}
  }
});
</script>

同样也可以(value,key,index) in obj分别表示值键和序号

4、v-for里的key

<div v-for="item in items" :key="item.id">

当使用for时，如果不是简单元素，最好标注唯一key，

5、变动方法

这些方法可以引起视图的刷新

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

调用方法为vm.items.push({name:'',sex:''})

6、非响应

由于js的原因，有些数组的变动是不能响应的。

第一种是利用序号改变值，vm.items[1]='x'，这种视图不会响应，需要Vue.set(vm.items,indexOfItem,newValue)这种方法或者vm.items.splice(indexOfItem,1,newValue)

如果要修改数组长度，vm.items.length也是不行的，需要vm.items.splice(newLength)

扫描二维码关注公众号，回复： 1798174 查看本文章

7、增删的非响应

我们知道，在js里自定义对象，如obj={};需要新增属性只需要obj.age=22;即可，但是这个在vue里不能使用。

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
// 通过如下方法新增属性
Vue.set(vm.userProfile, 'age', 27)

如果要赋予多个属性，用如下方法

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

8、过滤结果

如果需要过滤结果，可以使用computed，或者methods

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    // filter是对数组每一个元素进行过滤，这里面简单例子其实v-if也可以做
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 如果使用methods
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

9、v-for对数字的处理

// 会显示1-10 10个span
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>