Vue.js--循环语句（v-for）

最新推荐文章于 2024-11-26 09:23:35 发布

原创最新推荐文章于 2024-11-26 09:23:35 发布 · 871 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #循环语句

Vue.js 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了Vue.js框架中v-for指令的使用方法，包括如何通过v-for渲染数组和对象，以及如何获取迭代过程中的键名和索引。同时，文章还展示了如何用v-for迭代整数。

循环语句

循环语句使用v-for指令。
v-for指令需要以site in sites形式的特殊语法，sites是元数据数组并且site是数组元素迭代的别名。

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: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

模板中使用v-for：


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

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.baidu.com',
                slogan: '百度一下，你就知道'
            }
        }
    })
</script>

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


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

在这里插入图片描述
第三个参数为索引：

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

在这里插入图片描述 v-for迭代整数：


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