vue 动态设置<style>的属性
有的时候需要设置style中的属性,但又不想总是行内的绑定,所以希望能设置个变量来替代style中的值。具体办法:1.定义ref在div标签中,ref要定义在需要修改class属性的标签上。2.在style中定义变量--bgColor。3.使用函数refDiv.value.style.setProperty('--bgColor',''blue) 。<div class='title' re
·
有的时候需要设置style中的属性,但又不想总是行内的绑定,所以希望能设置个变量来替代style中的值。在网上查了一些资料后找到办法,于是便想记录下来了。
具体办法:
1.定义ref在div标签中,ref要定义在需要修改class属性的标签上。
2.在style中定义变量--bgColor。
3.使用函数 refDiv.value.style.setProperty('--bgColor',''blue) 。
<div class='title' ref='refDiv'>
中华人民共和国
</div>
<script>
export default defineComponent({
setup(){
const refDiv=ref();
refDiv.value.style.setProperty('--bgColor',''blue);
}
return {
refDiv,
}
})
</script>
<style>
.title{
background:var(--bgColor);
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)