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

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

1、简单数组的遍历

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            list:[</span>'one','two','three','four','five'<span style="color: #000000"&gt;]
        },methods:{}
    })
</span></script>

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

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

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

2、对象数组的遍历

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            list:[
                {</span>'course':'语文','score':89<span style="color: #000000"&gt;},{</span>'course':'数学','score':80<span style="color: #000000"&gt;},{</span>'course':'英语','score':90<span style="color: #000000"&gt;}
            ]
        },methods:{}
    })
</span></script>

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

3、遍历对象

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            mark:{
                </span>'语文':90<span style="color: #000000"&gt;,</span>'数学':95<span style="color: #000000"&gt;,</span>'英语':89<span style="color: #000000"&gt;
            }
        },methods:{}
    })
</span></script>

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

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

4、遍历数字

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

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

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!