v-for遍历数组和对象

v-for 常用于遍历数组或对象, 前端使用 li 输出

遍历数组

首先创建一个 json 数组对象 items, 每一项取名 message, 接着使用 v-for 遍历

使用了 v-for 的对象, 会自动创建多个, 比如下面的 li 标签

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>v-for例子1</h2>
<ul id="app">
  <li v-for="item in items">
	{{ item.message }}
  </li>
</ul>
<script>
var vm = new Vue({
  el: '#app',
  data: {
	items: [
	  { message: 'Foo' },
	  { message: 'Bar' }
	]
  }
});
</script>

数组第二参数-索引

在 v-for 遍历数组时, 可以有第二个参数, 它必须是索引, 与变量名无关

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>v-for例子2</h2>
<ul id="app">
  <li v-for="(item,index) in items">
	{{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
<script>
var vm = new Vue({
  el: '#app',
  data: {
	parentMessage: 'Parent',
	items: [
	  { message: 'Foo' },
	  { message: 'Bar' }
	]
  }
});
</script>

v-for遍历对象

遍历对象和数组十分相似, 写法相同, 比如下面的简单例子

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>v-for例子3</h2>
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
	{{ value }}
  </li>
</ul>
<script>
new Vue({
  el: '#v-for-object',
  data: {
	object: {
	  title: 'How to do lists in Vue',
	  author: 'Jane Doe',
	  publishedAt: '2016-04-10'
	}
  }
});
</script>

对象第二第三参数

对象的第二参数是 : 键名, 也就是数据的名称

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

对象的第三参数是 : 索引, 也是从0开始

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

在遍历对象时, vue 不保证在所有的 js 引擎下相同顺序.

维护状态

在使用 v-for 渲染时, 如果数据项的顺序中途被改变, 那么输出的值就会不同, 为了把 顺序 和 数据一一对应, 以便重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

实例, 如下

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>v-for例子4</h2>
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
	{{ item.message }}
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
	items: [
	  { message: 'Foo' },
	  { message: 'Bar' }
	]
  }
});
</script>

后续的章节中, 可以了解到 key 在 v-for 中还有其他用途. 比如v-for还支持的方法有

• push方法 –> 最后添加
• pop方法 –> 弹出最后一个
• shift方法 –> 删除第一个元素
• unshift方法 –> 删除最后一个
• reverse方法 –> 逆置元素顺序
• splice方法 –> 删除,替换某个位置的数据

此外, 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。