vue2中多个div动态背景颜色

最新推荐文章于 2024-03-29 10:19:39 发布

一个热爱前端的小胖子

最新推荐文章于 2024-03-29 10:19:39 发布

阅读量287

点赞数

分类专栏： vue2 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_70243424/article/details/135023017

版权

vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

template>
  <div>
    <div class="main-tabs-items" v-for="(item, index) in 3" :key="index" :style="getBackgroundColor(index)">
      1
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getBackgroundColor(index) {
      const colors = ['red', 'green', 'blue']; // 设置不同的颜色值
      return `background-color: ${colors[index]};`;
    }
  }
}
</script>

<style>
.main-tabs-items {
  width: 100px;
  height: 100px;
  color: white;
  text-align: center;
  line-height: 100px;
}
</style>