vue_loop

循环语句

循环使用 v-for 指令。

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

v-for 可以绑定数据到数组来渲染一个列表:

v-for 指令

<div id="app">
 <ol>
 <li v-for="site in sites">
 {{ site.name }}
 </li>
 </ol>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
 sites: [
 { name: 'iCodebang' },
 { name: 'Google' },
 { name: 'Taobao' }
 ]
 }
})
</script>

尝试一下 »

模板中使用 v-for:

v-for

<ul>
 <template v-for="site in sites">
 <li>{{ site.name }}</li>
 <li>--------------</li>
 </template>
</ul>

尝试一下 »

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据:

v-for

<div id="app">
 <ul>
 <li v-for="value in object">
 {{ value }}
 </li>
 </ul>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
 object: {
 name: '本站教程',
 url: 'http://www.icodebang.com',
 slogan: '学的不仅是技术,更是梦想!'
 }
 }
})
</script>

尝试一下 »

你也可以提供第二个的参数为键名:

v-for

<div id="app">
 <ul>
 <li v-for="(value, key) in object">
 {{ key }} : {{ value }}
 </li>
 </ul>
</div>

尝试一下 »

第三个参数为索引:

v-for

<div id="app">
 <ul>
 <li v-for="(value, key, index) in object">
 {{ index }}. {{ key }} : {{ value }}
 </li>
 </ul>
</div>

尝试一下 »

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
 <ul>
 <li v-for="n in 10">
 {{ n }}
 </li>
 </ul>
</div>

尝试一下 »

0 个评论

要回复文章请先登录注册