在uniapp怎么通过下标改变样式
时间: 2023-06-12 10:06:40 浏览: 73
当vue路由变化时,改变导航栏的样式方法
在 Uniapp 中,你可以通过以下方式改变样式:
1. 使用 v-bind 绑定 style 属性,通过计算属性根据下标值动态生成样式。
```html
<template>
<div v-for="(item, index) in list" :key="index" :style="getStyle(index)">
{{ item }}
</div>
</template>
<script>
export default {
data() {
return {
list: ["item1", "item2", "item3"],
};
},
methods: {
getStyle(index) {
// 根据下标值动态生成样式
return {
color: index % 2 === 0 ? "red" : "blue",
fontWeight: index % 2 === 0 ? "bold" : "normal",
};
},
},
};
</script>
```
2. 使用 v-bind:class 绑定 class 属性,通过计算属性根据下标值动态生成类名。
```html
<template>
<div v-for="(item, index) in list" :key="index" :class="getClass(index)">
{{ item }}
</div>
</template>
<script>
export default {
data() {
return {
list: ["item1", "item2", "item3"],
};
},
methods: {
getClass(index) {
// 根据下标值动态生成类名
return index % 2 === 0 ? "red" : "blue";
},
},
};
</script>
<style>
.red {
color: red;
font-weight: bold;
}
.blue {
color: blue;
font-weight: normal;
}
</style>
```
阅读全文