动态设置css样式，背景图，class

罐装冰块224

已于 2022-09-26 15:25:51 修改

阅读量1.2k

点赞数 1

文章标签： css html 前端 css3

于 2022-08-23 17:18:39 首次发布

本文链接：https://blog.csdn.net/qq_61901473/article/details/126488988

版权

本文介绍了在Vue中如何动态地设置元素的class和style属性。通过使用`:class`和`:style`指令，可以实现根据条件切换class，以及动态设置颜色和背景图片。示例代码展示了如何利用变量和条件判断来改变背景图片。此外，还演示了如何使用CSS变量和伪元素结合，以动态改变列表项的背景图片。

摘要由CSDN通过智能技术生成

1.动态设置class

设置index的值，动态切换class

<div :class="{'active': index > 3}"> </div>

2.动态设置style

<div :style="{color: item.color, background:'url('+item.imgUrl+')', }"</div>

3.动态设置背景图

<template>
  <div>
    <ul>
      <div v-for="item in [1,2,3,4,5,6,7,8]" :key="item" >
        <li class="list"
        :style="{'--bgurl': item%2===0 ? ('url('+img1+')'): ('url('+img2+')')}"></li>
      </div>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      img1: './img/bg1.png',
      img2: './img/bg2.png',
    }
  },
}
</script>
<style scoped>

.list::before {
  background-image: var(--bgurl);
}
</style>