vue循环遍历list集合
时间: 2024-09-03 22:03:43 浏览: 106
vue使用map代替Aarry数组循环遍历
Vue.js中,你可以使用`v-for`指令来进行数组或对象列表的遍历。假设你有一个名为`list`的数据数组,其结构如下:
```javascript
data() {
return {
list: [
{ name: 'Item 1', value: 'Value 1' },
{ name: 'Item 2', value: 'Value 2' },
// 更多项...
]
}
}
```
遍历这个列表并显示每个元素的内容可以这样做:
```html
<ul>
<li v-for="item in list">
<p>名称:{{ item.name }}</p>
<p>值:{{ item.value }}</p>
</li>
</ul>
```
在这个例子中,`v-for`将`list`数组中的每一项渲染成一个`<li>`元素,并通过`{{ }}`插值表达式访问`item.name`和`item.value`属性。
阅读全文