在uniapp怎么通过下标改变样式

在 Uniapp 中，你可以通过以下方式改变样式：

1. 使用 v-bind 绑定 style 属性，通过计算属性根据下标值动态生成样式。

<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 属性，通过计算属性根据下标值动态生成类名。

<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>