uniapp语法糖v-for
时间: 2023-10-13 18:24:37 浏览: 150
uniapp的v-for语法糖与Vue.js的v-for语法糖类似,用于循环遍历数组或对象,并渲染输出对应的内容。
使用方式如下:
1.遍历数组
```
<template>
<view>
<ul>
<li v-for="(item, index) in list">{{index}} - {{item}}</li>
</ul>
</view>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'pear']
}
}
}
</script>
```
2.遍历对象
```
<template>
<view>
<ul>
<li v-for="(value, key) in obj">{{key}} - {{value}}</li>
</ul>
</view>
</template>
<script>
export default {
data() {
return {
obj: {
name: 'Tom',
age: 18,
gender: 'male'
}
}
}
}
</script>
```
在循环中,可以使用`index`获取当前循环的索引,也可以使用`key`获取当前循环的键名。同时,还可以在循环中使用`v-if`、`v-show`等指令进行条件渲染。
阅读全文