一、v-for

用法：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

参考:列表渲染

二、在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

1.0、是一个简单的 todo 列表的完整例子：

<!-- 列表渲染
用 v-for 把一个数组映射为一组元素
我们可以用v-for指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名
 -->
 <!-- 在组件上使用 v-for -->
<template>
 <div class="hello">
 <form v-on:submit.prevent="addNewTodo">
 <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" />
 <button @click="addItem1" class="additem">添加数组</button>
 </form>
 <!-- 然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props： -->
 <ul>
     <todo-item
       v-for="(todo, index) in todos"
       :key="todo.id"
       :title="todo.title"
       @remove="todos.splice(index, 1)"
     ></todo-item>
 </ul>
 <ul id="array-rendering" class="demo">
 <li v-for="item in todos" :key="item.cabinetCode">
 {{ item.cabinetCode }}
 </li>
 </ul>
 </div>
 
</template>

以上是</template>模块

<script>
export default {
    data(){
        return{
        text:'',
        newTodoText: '',
        todos: [
        {
        aisleNumber: 1,
        cabinetCode: 'ios移动端开发',
        },
        {
        aisleNumber: 2,
        cabinetCode: '安卓开发',
        },
        {
        aisleNumber: 3,
        cabinetCode: 'Vue前端开发'
        }
        ],
        nextTodoId: 4,
    }
    },
    methods:{
        addItem1(){
        this.todos.push({
            aisleNumber: this.nextTodoId++,
            cabinetCode: this.newTodoText
        })
        this.newTodoText = ''
        },

    },
}
</script>

以上是</script>区域

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 header{
   font-size: 28px;
   line-height: 40px;
   text-align:center;
 }
 
 ul{
   margin:0;
   padding:0;
   list-style: none;
 }
 .hello{
   width:400px;
   height: 500px;
   margin:80px auto;
 }
 input{
   height: 34px;
   margin-right: 20px;
   padding-left: 10px;
   border:1px solid #ccc;
   border-radius: 6px;
   margin-bottom: 20px;
 }
 
 .additem{
   width: 70px;
   height: 36px;
   background-color: #409eff;
   border: none;
   border-radius: 6px;
   color:#fff;
 }
 .todo-item{
   display: flex;
   padding :0 20px;
   height:40px;
 }
 .todo-item span{
   padding-right: 10px;
 }
 .todo-item p{
   flex: 1;
   margin-top:0px
 }
 .todo-item button{
   width: 50px;
   height: 28px;
   background-color:red;
   border:none;
   border-radius: 6px;
   color:#fff;
 }
 .todo-nodata{
   font-size: 18px;
   line-height: 80px;
   text-align: center;
   color: #409eff;
 }
 
 .additem{
   width: 70px;
   height: 36px;
   background-color: #409eff;
   border: none;
   border-radius: 6px;
   color:#fff;
 }
 
</style>

页面显示预览哈