本文来源于阿里云-云栖社区，原文点击这里。

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名

基本用法

js django" style="margin:0px; padding:0.5em; font-size:undefined; font-family:Menlo,Monaco,Consolas,"Courier New",monospace; color:rgb(248,248,242); background:rgb(35,36,31); white-space:pre-wrap; display:block; overflow-x:auto">js-tag" style=""><js-name" style="color:rgb(102,217,239)">ul js-attr" style="">id=js-string" style="color:rgb(230,219,116)">"example-1">
    js-tag" style=""><js-name" style="color:rgb(102,217,239)">li js-attr" style="">v-for=js-string" style="color:rgb(230,219,116)">"item in items">js-template-variable" style="">{{ item.message }}js-tag" style=""></js-name" style="color:rgb(102,217,239)">li>
js-tag" style=""></js-name" style="color:rgb(102,217,239)">ul>
js-tag" style=""><js-name" style="color:rgb(102,217,239)">script>
js-keyword" style="color:rgb(249,38,114)">var example1 = js-keyword" style="color:rgb(249,38,114)">new Vue({
    el: js-string" style="color:rgb(230,219,116)">'#example-1',
    data: {
        items: [
            {message: js-string" style="color:rgb(230,219,116)">'Foo' },
            {message: js-string" style="color:rgb(230,219,116)">'Bar' }
        ]
    }
})
js-tag" style=""></js-name" style="color:rgb(102,217,239)">script>

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引

js django" style="margin:0px; padding:0.5em; font-size:undefined; font-family:Menlo,Monaco,Consolas,"Courier New",monospace; color:rgb(248,248,242); background:rgb(35,36,31); white-space:pre-wrap; display:block; overflow-x:auto">js-tag" style=""><js-name" style="color:rgb(102,217,239)">ul js-attr" style="">id=js-string" style="color:rgb(230,219,116)">"example-2">
    js-tag" style=""><js-name" style="color:rgb(102,217,239)">li js-attr" style="">v-for=js-string" style="color:rgb(230,219,116)">"(item, index) in items">
        js-template-variable" style="">{{ parentMessage }} - js-template-variable" style="">{{ index }} - js-template-variable" style="">{{ item.message }}
    js-tag" style=""></js-name" style="color:rgb(102,217,239)">li>
js-tag" style=""></js-name" style="color:rgb(102,217,239)">ul>
js-tag" style=""><js-name" style="color:rgb(102,217,239)">script>
js-keyword" style="color:rgb(249,38,114)">var example2 = js-keyword" style="color:rgb(249,38,114)">new Vue({
    el: js-string" style="color:rgb(230,219,116)">'#example-2',
    data: {
        parentMessage: js-string" style="color:rgb(230,219,116)">'Parent',
        items: [
            { message: js-string" style="color:rgb(230,219,116)">'Foo' },
            { message: js-string" style="color:rgb(230,219,116)">'Bar' }
        ]
    }
})
js-tag" style=""></js-name" style="color:rgb(102,217,239)">script>

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

js applescript" style="margin:0px; padding:0.5em; font-size:undefined; font-family:Menlo,Monaco,Consolas,"Courier New",monospace; color:rgb(248,248,242); background:rgb(35,36,31); white-space:pre-wrap; display:block; overflow-x:auto"><js-keyword" style="color:rgb(249,38,114)">div v-js-keyword" style="color:rgb(249,38,114)">for=js-string" style="color:rgb(230,219,116)">"item of items"></js-keyword" style="color:rgb(249,38,114)">div>

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 标签来渲染多个元素块。

>>>展开全文