Vue学习之路第十三篇：v-for指令

v-for指令，看名字想必大家也能猜到其作用，没错，就是用来迭代、遍历的。

1、简单数组的遍历

<body>
    <divi id="app">
        <span v-for="item in list">{{item}}&emsp;</span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                list:['one','two','three','four','five']
            },
            methods:{}
        })
    </script>
</body>

data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式来展示当前遍历的对象。

有时除了遍历数据外，我们还需要当前遍历的序号：

 <divi id="app">
    <span v-for="(item,i) in list">序号为：{{i}}，元素为：{{item}}<br></span>
 </div>

（Item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：

2、对象数组的遍历

<body>
    <divi id="app">
        <span v-for="(item,i) in list">序号：{{i}}，科目为：{{item.course}}，分数为：{{item.score}}<br></span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {'course':'语文', 'score':89},
                    {'course':'数学', 'score':80},
                    {'course':'英语', 'score':90}
                ]
            },
            methods:{}
        })
    </script>
</body>

通过"item.score"的方法，来获取对象的属性值。运行结果如下：

3、遍历对象

<body>
    <divi id="app">
        <span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                mark:{
                    '语文':90,
                    '数学':95,
                    '英语':89
                }
            },
            methods:{}
        })
    </script>
</body>

这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中YY为对象的key，XX为对象的值。

当然也可以写成：(XX,YY,i)，其中i为索引值。

4、遍历数字

<divi id="app">
      <span v-for="count in 5">当前数字为：{{count}}<br></span>
</div>

这里in后面直接写的是具体的数字。运行结果：

总结：v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字。

每天进步一点点！

Vue学习之路第十三篇：v-for指令

猜你喜欢