<p><code></p> <h1 id="articleHeader0">列表渲染</h1> <h2 id="articleHeader1">用 <code>v-for</code> 把一个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>对应为一组元素</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <li v-for = &quot;item in array&quot;> {{item.message}} </li> </div> <p><script> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { array:[ {message:'vue1'}, {message:'vue2'}, {message:'vue3'} ] }, }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span> = <span class="hljs-string">"item in array"</span>&gt;</span> {{item.message}} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el: <span class="hljs-string">'#app'</span>, data: { array:[ {message:<span class="hljs-string">'vue1'</span>}, {message:<span class="hljs-string">'vue2'</span>}, {message:<span class="hljs-string">'vue3'</span>} ] }, }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <li v-for = &quot;item in array&quot;> {{item}} </li> </div> <p><script> var app = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app', data: { array:[ 'vue1', 'vue2', 'vue3' ] }, }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span> = <span class="hljs-string">"item in array"</span>&gt;</span> {{item}} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, data: { array:[ <span class="hljs-string">'vue1'</span>, <span class="hljs-string">'vue2'</span>, <span class="hljs-string">'vue3'</span> ] }, }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>结果:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000015648855" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="1.png" title="1.png" style="cursor: pointer;"></span></p> <p><code>v-for</code> 还支持一个可选的第二个参数为当前项的索引。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <ul id=&quot;example-2&quot;> <li v-for=&quot;(item, index) in items&quot;> {{ index }} - {{ item.message }} </li> </ul> </div> <p><script> var example2 = new Vue({ el: '#example-2', data: { items: [ {message:'vue1'}, {message:'vue2'}, {message:'vue3'} ] } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-2"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in items"</span>&gt;</span> {{ index }} - {{ item.message }} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> example2 = <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#example-2'</span>, data: { items: [ {message:<span class="hljs-string">'vue1'</span>}, {message:<span class="hljs-string">'vue2'</span>}, {message:<span class="hljs-string">'vue3'</span>} ] } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>结果:<br /><span class="img-wrap"><img data-src="/img/remote/1460000015648856" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2.png" title="2.png" style="cursor: pointer;"></span></p> <p>对象的 <code>v-for</code><br />可以用 <code>v-for</code> 通过一个对象的属性来迭代。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <ul id=&quot;v-for-object&quot; class=&quot;demo&quot;> <li v-for=&quot;value in object&quot;> {{ value }} </li> </ul> <p><script> new Vue({ el: '#v-for-object', data: { object: { o: 'vue1', ob: 'vue2', obj: 'vue3' } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;ul id=<span class="hljs-string">"v-for-object"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"demo"</span>&gt; &lt;li v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"value in object"</span>&gt; {{ value }} &lt;/li&gt; &lt;/ul&gt; &lt;script&gt; <span class="hljs-keyword">new</span> <span class="hljs-type">Vue</span>({ el: '#v-<span class="hljs-keyword">for</span>-<span class="hljs-class"><span class="hljs-keyword">object</span>',</span> data: { <span class="hljs-class"><span class="hljs-keyword">object</span></span>: { o: <span class="hljs-symbol">'vue</span>1', ob: <span class="hljs-symbol">'vue</span>2', obj: <span class="hljs-symbol">'vue</span>3' } } }) &lt;/script&gt;</code></pre> <p>结果:<br /><span class="img-wrap"><img data-src="/img/remote/1460000015648857" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="3.png" title="3.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <ul id=&quot;v-for-object&quot; class=&quot;demo&quot;> <li v-for=&quot;(value,key) in object&quot;> {{key}}: {{ value }} </li> </ul> <p><script> new Vue({ el: '#v-for-object', data: { object: { obj1: 'vue1', obj2: 'vue2', obj3: 'vue3' } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;ul id=<span class="hljs-string">"v-for-object"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"demo"</span>&gt; &lt;li v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"(value,key) in object"</span>&gt; {{key}}: {{ value }} &lt;/li&gt; &lt;/ul&gt; &lt;script&gt; <span class="hljs-keyword">new</span> <span class="hljs-type">Vue</span>({ el: '#v-<span class="hljs-keyword">for</span>-<span class="hljs-class"><span class="hljs-keyword">object</span>',</span> data: { <span class="hljs-class"><span class="hljs-keyword">object</span></span>: { obj1: <span class="hljs-symbol">'vue</span>1', obj2: <span class="hljs-symbol">'vue</span>2', obj3: <span class="hljs-symbol">'vue</span>3' } } }) &lt;/script&gt;</code></pre> <p>结果:<br /><span class="img-wrap"><img data-src="/img/remote/1460000015648858" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="4.png" title="4.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <ul id=&quot;v-for-object&quot; class=&quot;demo&quot;> <li v-for=&quot;(value,key,index) in object&quot;> {{index}}. {{key}}: {{ value }} </li> </ul> <p><script> new Vue({ el: '#v-for-object', data: { object: { obj1: 'vue1', obj2: 'vue2', obj3: 'vue3' } } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;ul id=<span class="hljs-string">"v-for-object"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"demo"</span>&gt; &lt;li v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"(value,key,index) in object"</span>&gt; {{index}}. {{key}}: {{ value }} &lt;/li&gt; &lt;/ul&gt; &lt;script&gt; <span class="hljs-keyword">new</span> <span class="hljs-type">Vue</span>({ el: '#v-<span class="hljs-keyword">for</span>-<span class="hljs-class"><span class="hljs-keyword">object</span>',</span> data: { <span class="hljs-class"><span class="hljs-keyword">object</span></span>: { obj1: <span class="hljs-symbol">'vue</span>1', obj2: <span class="hljs-symbol">'vue</span>2', obj3: <span class="hljs-symbol">'vue</span>3' } } }) &lt;/script&gt;</code></pre> <p>结果:<br /><span class="img-wrap"><img data-src="/img/remote/1460000015648859" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="5.png" title="5.png" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25166.html