vue添加list
时间: 2023-08-18 18:05:07 浏览: 55
vue实现列表的添加点击
要在 Vue 中添加一个列表,你可以使用 `v-for` 指令来循环遍历数组或对象并渲染出内容。
以下是一个简单的例子,它展示了如何使用 `v-for` 指令来渲染一个简单的列表:
```html
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
};
</script>
```
在上面的示例中,我们定义了一个名为 `items` 的数组,其中包含三个对象。我们使用 `v-for` 指令来循环遍历 `items` 数组,并在每次迭代中渲染出一个 `li` 元素。我们还使用 `:key` 绑定来告诉 Vue 如何跟踪每个列表项。
你可以根据需要修改数据和模板,以满足你的需求。
阅读全文