vue的js里面怎么遍历
时间: 2023-05-29 13:05:46 浏览: 60
Vue.js 中可以使用 v-for 指令来遍历数组或对象。具体用法如下:
1. 遍历数组:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange']
}
}
}
</script>
```
2. 遍历对象:
```html
<template>
<div>
<ul>
<li v-for="(value, key) in object" :key="key">{{ value }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
object: {
name: 'Tom',
age: 18,
gender: 'male'
}
}
}
}
</script>
```
其中,v-for 指令后面的括号中,第一个参数是当前遍历到的元素,第二个参数是当前遍历到的索引或键。在遍历数组时,可以省略第二个参数;在遍历对象时,需要同时指定键和值。另外,必须给每一个子元素设置一个唯一的 key 值,以便 Vue.js 管理和更新组件时能够正确识别每个元素。