vue遍历数组信息v-for指令

vue遍历数组信息v-for指令

基本使用

vue 使用v-for指令，遍历数组信息。

语法：

<标签 v-for="成员值 in 数组"></标签>
<标签 v-for="(成员值,下标) in 数组"></标签>

示例：

<div id="app">
  <ul>
    <li v-for="item in color">{{item}}</li>
  </ul>
  <ul>
    <li v-for="(item,k) in color">{{k}}-----{{item}}</li>
  </ul>
</div>

<script src="./vue.js"></script>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      color:['red','yellow','pink']
    }
  })
</script>

注意：

​ 使用v-for指令的html标签，由于遍历机制，本身标签会被创建多份出来。

v-for :key

key

key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。
使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

在vue2.2.0+版本里边，v-for使用的同时必须使用:key，以便vue能准确跟踪每个节点，从而重用和重新排序现有元素，需要为每个数据项提供一个唯一的、代表当前项目的属性值赋予给key。

语法：

<标签 v-for="" :key="可以代表每个项目的唯一的值"></标签>

应用：

<tr v-for="(item,k) in brandsList" :key="item.id">

项目应用中，每个v-for必须结合:key一并使用。

注意：

1. :key不设置，也是存在的，默认绑定每个项目下标序号信息。
2. key是一个普通属性，前边设置:冒号，代表属性绑定。