vue控制css动态改变样式

最新推荐文章于 2025-02-08 09:00:00 发布

原创最新推荐文章于 2025-02-08 09:00:00 发布 · 817 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #前端

文章介绍了如何在Vue组件中使用JavaScript定义并动态绑定CSS变量（--wateRmark），展示了一个小功能页面的模板和样式设置，包括如何通过`var()`函数调用数据属性来改变背景图片的位置和大小。

记录小功能
页面：

<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>