怎么在vue的style标签里面使用变量？
兄弟，我刚好碰到这个问题。代码里需要不断变更CSS里样式的值（遍历+大量），并通过JS进行设置。基本上要求应该是和你差不多的。 以上所有方法我基本都试过，用了一个白天加半个晚上，现在是凌晨三点。
我说一下我的方法，我自己已验证有效： 1、演示HTML主体结构
<div class="header" ref="mycolor" @click="func">
<div class="header-info"></div>
</div>2、首先作用区域范围内设置“CSS变量”
<style>
/*在header区域内设置 CSS变量--bccolor */
.header {
--bcColor: #ffffff;
}
/*在子元素中使用该变量*/
.header-info
background-color :var(--bcColor);
</style>3、在JS中通过setProperty()方法修改“--bcColor”的值，从而间接改变对应子元素的（background-color）背景颜色
<script>
methods:{
func () {
this.$refs.mycolor.style.setProperty("--bcColor",'white');
}
}
</script>PS:至少在我还清醒之前，注册上来回答一下，希望能帮到你。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读