循环语句

v-for渲染项目列表

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

new Vue({
    el: "#app4",
    data: {
        items: [
            {text: "这是第一个li"},
            {text: "这是第二个li"},
            {text: "这是第三个li"}
        ]
    }
});

v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

上面这句话翻译一下：

• items是data对象中的一个对象数组
• items数组中每个成员对象的key都必须相同

（v-for指令我觉得就是个for...in循环包装了一下）

上面这段代码稍作修改

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

js脚本不做变化。结果如下

两次的代码做个对比，很显然可以看出v-for指令的特性：会把拥有v-for属性的元素拷贝items.length次

基于这个推论，我想让分割线只显示一次：

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

使用v-for迭代对象

<div id="app4">
    <ol>
        <li v-for="value in object">
            {{value}}
        </li>
    </ol>
</div>

new Vue({
    el: "#app4",
    data: {
        object: {
            name: "jiao",
            age: "25",
            thing: "coding"
        }
    }
});

使用v-for迭代整数

<div id="app4">
    <ol>
        <li v-for="value in 100">
            {{value}}
        </li>
    </ol>
</div>