Vue.js--------v-for循环语句命令

最新推荐文章于 2025-06-21 21:10:32 发布

天空中一颗明亮的星

最新推荐文章于 2025-06-21 21:10:32 发布

阅读量566

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/ling_ling1997/article/details/85162852

Vue.js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue.js中v-for指令的使用方法，包括如何用v-for进行数组和对象的迭代，展示键值对，以及如何获取索引。通过实例展示了v-for指令在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-for指令迭代循环

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

2、循环迭代对象

    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
  <script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '张三',
     agel: '18',
      sex: '男！'
    }
  }
})
</script>

3、键值对显示key：value值得显示

    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
  <script>
new Vue({
  el: '#app',
  data: {
    object: {
   name: '张三',
     agel: '18',
      sex: '男！'
    }
  }
})
</script>

在这里插入图片描述
4.键值对、索引的显示

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

new Vue({
  el: '#app',
  data: {
    object: {
   name: '张三',
     agel: '18',
      sex: '男！'
    }
  }
})
</script>

在这里插入图片描述