vue3中 动态修改css样式内容的两种方法

第一种：直接修改style样式设置如下

//style设置需要样式大写backgroundColor 驼峰写法
<div :style="{backgroundColor: bgColor,backgroundImage:`url(${bgImg})`}"></div>
//定义动态数据变量
let bgColor = ref('#f40')
let bgImg = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')
//图片最好使用路径地址   图片的其他样式可以在css中设置
<style  lang="scss" scoped>
	div{
		background-repeat: no-repeat;
		background-position: left 76px;
		background-size: 100% 100%;
	}
</style>

或者简便写法

//这里使用 `` 的写法
<div :style="`background: url(${bgImg}) no-report left top;`></div>
let bgImg = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')
//或者
<div :style="`${style}`></div>
//定义动态数据变量
let style = `color:#f40;background: url(${bgImg}) no-report left top;`
let bgImg = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')

第二种方法 直接在css中使用v-bind进行设置

//定义动态数据变量
let bgColor = ref('#f40')
let bgImg = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')
//样式可以在css中设置
<style  lang="scss" scoped>
	div{
		background-image: v-bind('bgImg');
		background-color: v-bind('bgColor');
		background-repeat: no-repeat;
		background-position: left 76px;
		background-size: 100% 100%;
	}
</style>