Vue.js 中 v-for 的使用

v-for 指令是一个基于数组来重复渲染的指令，通常用于显示列表和表格数据

        v-for 指令需要使用 “ item initems ” 形式的特殊语法

        items 是源数据数组

        item  则是被迭代的数组元素的别名

 

下面案例是使用 v-for 打印出data数据源中的数据

 

<div id="app">
        <ul>
            <!-- item 是从items表里取出来的一项 ，循环后就能把全部都取出来 -->
            <!-- 
                index 是索引 在开发中为了唯一标识每一个项 还可以用 key 来绑定一个主键
                这里的key 绑定 index（索引）
            -->
            <li v-for="(item,index) in items":key="index">
                <a href="#">{{index}} {{item}}</a>
            </li>
        </ul>
     </div>

<script src="./js/vue.js"></script>
     <script>
         var vm=new Vue({
            el:"#app",
            data:{
                items:[
                    "部门管理",
                    "员工管理",
                    "签证管理"
                ]
            }
         });
     </script>

 

下面案例是用 v-for 显示员工的个人信息

<div id="app">

        <!-- 
            value 是你在Vue 对象的数据源中 自己写入的数据 ：万五、22、项目经理等
            name  是你在Vue 对象的数据源中起的名字 ： name、age、obj等
            index 代表索引
         -->

         <!-- 
             v-for 循环中数据源有多少个就会循环多少次

             emp 有四个字段 ： name、age、obj、sex
             那么v-for就会循环四次
          -->

          <!-- 
              运行完v-for 后 改变数据源的顺序 v-for会就地更新
           -->

        <div v-for="(value,name,index) in emp">
            {{index}} 
            {{name}}
            {{value}} 
            <!-- 文本插值是不会换行的 -->
        </div>


    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                emp:{
                    name:"万五",
                    sex:"男",
                    age:22,
                    obj:"项目经理",
                    
                }
            }
        });
    </script>