vue v-for 用法遍历数据
时间: 2024-09-23 07:07:19 浏览: 39
解决vue v-for 遍历循环时key值报错的问题
Vue.js 的 `v-for` 是模板指令,用于基于数组或对象数据进行循环渲染。它的基本语法结构如下:
```html
<template>
<div>
<!-- 每个{{ item }}将被替换成数据数组中的一个元素 -->
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</div>
</template>
<script>
export default {
data() {
return {
items: ['苹果', '香蕉', '橙子'] // 待遍历的数据
};
}
};
</script>
```
在这个例子中:
- `items` 是你要遍历的数据源。
- `(item, index)` 是每次循环时提供的两个变量,`item` 是当前迭代到的数组元素,`index` 是对应元素的索引。
- `:key` 是必需的,用于给每个列表项唯一标识,避免Vue在更新时出现问题。
当你改变 `items` 数组的内容,`v-for` 将会自动更新页面,显示新的元素。
阅读全文