javascript - Vue Js - 通过 v-for X 次循环(在一个范围内)

标签 javascript vue.js vuejs2 v-for

如何通过 v-for 重复循环 X(例如 10)次?

<!-- want to repeat this (e.g.) 10 times -->

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

文档显示:

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

<!-- or -->

<li v-for="n in 10">{{ n }} </li>

<!-- this doesn't work -->

<li v-for="item in 10">{{ item.price }}</li>

但是 vue 从哪里知道对象的来源呢? 如果我像文档所说的那样渲染它,我会得到项目和项目的数量,但没有内容。

最佳答案

您可以在范围内使用索引,然后通过其索引访问数组:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

请注意,这是 1 索引的:在第一次迭代中,index 为 1,在第二次迭代中,index 为 2,依此类推。

您还可以检查 Official Documentation获取更多信息。

关于javascript - Vue Js - 通过 v-for X 次循环(在一个范围内),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44617484/

相关文章:

javascript - 第二次选择时 Select2 显示 "No result found"消息

javascript - Vue 选择如何将 1 个属性绑定(bind)到 v-model

javascript - 使用 Axios 和 Vue 获取 api 数据 - 返回 undefined

javascript - 什么可以替代谷歌地图信息窗口

vuejs2 - 如何在 vuejs 插件中创建响应式全局属性?

javascript - Aurelia 可绑定(bind)值转换器( bool 值等)

javascript - 在屏幕中垂直居中文本

javascript - Bootstrap 网格缩略图,单击时可展开预览

javascript - 使用 Webpack 将 Vue 暴露给全局

javascript - Vue.js 删除了 jQuery 事件处理程序