vue的<script>里面怎么遍历
时间: 2023-05-29 20:05:47 浏览: 198
在Vue的`<script>`中,可以使用JavaScript的循环语句来遍历数组或对象。
例如,遍历一个数组可以使用`for`循环:
```vue
<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange']
}
},
mounted() {
for (let i = 0; i < this.items.length; i++) {
console.log(this.items[i])
}
}
}
</script>
```
遍历一个对象可以使用`for...in`循环:
```vue
<script>
export default {
data() {
return {
person: {
name: 'Tom',
age: 18,
gender: 'male'
}
}
},
mounted() {
for (let key in this.person) {
console.log(key + ': ' + this.person[key])
}
}
}
</script>
```
另外,在Vue中也可以使用`v-for`指令来进行循环渲染,例如:
```vue
<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>
```
上面的代码将会渲染一个包含三个列表项的无序列表。在`v-for`指令中,`item`表示数组中的每个元素,`index`表示数组的索引。`:key`属性用于提高Vue的渲染性能。