vue动态设置css样式，设置class以及::before伪元素背景图片

最新推荐文章于 2024-10-09 08:55:16 发布

qq_40315971

最新推荐文章于 2024-10-09 08:55:16 发布

阅读量8.1k

点赞数 4

文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/qq_40315971/article/details/116303139

版权

1.动态设置div的class

可以通过传给:class一个对象，以动态地切换class

<div :class="{ active: isActive,'text-danger': hasError }"></div>

上面表示active这个class是否存在。取决于数据property isActive的真假，'text-danger'这个class同理

数组语法，可以把一个数组传给:class,以应用一个class列表

<div  class="reletivediv">
          <div :class="['d-title',active===1?'actived':'',]" @click="changeActive(1)">今日元气</div>
          <div :class="['d-title',active===2?'actived':'']" @click="changeActive(2)">大航海</div>
          <a class="alink"><span class="v-mid">更多排行榜&gt;&nbsp;&nbsp;</span></a>
</div>

reletivediv里面的两个div都有d-title这个class,再根据当前active的值，给其中一个加上actived这个class

2.动态设置style

<div class="card-citm" v-for="item in zhibocardList" :key="item.id">
        <div><img :src="item.imgUrl" width="80"  height="80"/></div>
        <div class="cardright-info"><p  :style="{color: item.color, backgroundImage:'url('+item.imgUrl+')', }"><span style="font-size:25px">{{item.name}}</span></p>
          <p>{{item.smallDesc}}</p>
        </div>
</div>

3.动态设置伪元素:before的背景图片

使用css变量，声明css变量时，变量名字前加两根连词线,var函数用于读取变量。

<template>
  <div class="hello">
    <ul class="ulsty">
      <div v-for="item in [1,2,3,4,5]" :key="item" >
        <li 
        :style="{'--bgurl': item%2===0 ? ('url('+img1+')'): ('url('+img2+')')}"
         :class="item%2 === 1? 'odd':'even'"
      >
        {{item%2 === 0? '偶数': '奇数'}}
      </li>
      </div>
    </ul>
  </div>
</template>

<script>
import img1 from '../img/live/small1.png'
import img2 from '../img/live/small2.png'
export default {
  data() {
    return {
      img1: img1,
      img2: img2,
    }
  },
}
</script>
<style scoped>
.hello ul {
  display: block;
  position: relative;
  list-style-type: none;
  padding-inline-start: 40px;
}

.ulsty li {
  position: relative;
  padding-left: 60px;
}
.odd {
  border: 1px solid rebeccapurple;
  height: 70px;
}
.odd::before {
  content: '';
  position: absolute;
  border: 1px solid blue;
  background-image: var(--bgurl);
  background-size: 50px 50px;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
}
.even {
  border: 1px solid rgb(218, 135, 76);
  height: 70px;
} 
.even::before {
  content: '';
  background-image: var(--bgurl);
  background-size: 50px 50px;
  left: 0;
  border: 1px solid blue;
  top: 0;
  width: 50px;
  height: 50px;
  position: absolute;
}
</style>

参考链接 https://blog.csdn.net/qq_44827891/article/details/106413564