vue控制css动态改变样式

记录小功能
页面：

<template>
	<div>
		<div class="frise" :style="{ '--wateRmark': shuiyin ,'--kuan':kuan,'--gao':gao }">111</div>
		<div class="frises" :style="{ '--wateRmark': shuiyin }">222</div>
	</div>
</template>

给要改变的样式定义参数’–wateRmark’
js 定义参数及赋值

export default {
  	data() {
    	return {
    		shuiyin: '',
    		kuan: '300px',
    		gao: '200px',
    	}
  	},
 	created() {
  		var shuiyin = 'tupiandizhi';//图片地址，用法之一
		this.shuyin = 'url(' + shuiyin + ')';
	}
}
  

css用var()调用参数’–wateRmark’

.frises {
  	width: 950px;
  	margin: 0 auto;
  	// background: url('~@/assets/tupian.png') center center scroll no-repeat;
  	background: var(--wateRmark) center center scroll no-repeat;
}

.frise {
	width: var(--kuan);
	height: var(--gao);
  	// background: url('~@/assets/tupian.png') center center scroll no-repeat;
  	background: var(--wateRmark) center center scroll no-repeat;
}

完整代码：

<template>
	<div>
		<div class="frise" :style="{ '--wateRmark': shuiyin ,'--kuan':kuan,'--gao':gao}">111</div>
		<div class="frises" :style="{ '--wateRmark': shuiyin }">222</div>
	</div>
</template>
export default {
	data() {
    	return {
    		shuiyin: '',
    		kuan: '300px',
    		gao: '200px',
    	}
  	},
  	created() {
  		var shuiyin = 'tupiandizhi';//图片地址链接
		this.shuyin = 'url(' + shuiyin + ')';
	},
}
<style scoped lang="scss">
.frises {
  	width: 950px;
  	margin: 0 auto;
  	// background: url('~@/assets/tupian.png') center center scroll no-repeat;
  	background: var(--wateRmark) center center scroll no-repeat;
}

.frise {
	width: var(--kuan);
	height: var(--gao);
  	// background: url('~@/assets/tupian.png') center center scroll no-repeat;
  	background: var(--wateRmark) center center scroll no-repeat;
}
</style>

结语：每一次挫折都是你成功的一部分，不要畏惧失败，因为它总会带来经验和学习。