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

2024-02-04 15:19| 来源: 网络整理| 查看: 265

1.动态设置div的class

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

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

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

今日元气大航海更多排行榜;;;

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

2.动态设置style

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

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

{{item%2 === 0? '偶数': '奇数'}} import img1 from '../img/live/small1.png' import img2 from '../img/live/small2.png' export default { data() { return { img1: img1, img2: img2, } }, } .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; }

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

【本文地址】

公司简介

联系我们