vue的script动态改css、scss变量方法
创始人
2024-03-27 06:56:13
0

 解决场景:script设颜色变量,

        好了正文,如果上面demo你跑不了,你确认下是不是vue3版本比博主低?

        博主以下说的是vue2、和vue3+ts版本、vue3的sass版本、vue3的vue-class-component工具类、vue3的vue-property-decorator工具类都可以执行的方法。

        先科普下,别闲博主烦,照着先做↓↓↓↓↓↓



        以上代码运行之后的结果如下图,input的北京变成红色。是吧,这个是纯静态是".html"的文件哦

root{--color:red;},这个时候你可以认为是声明变量。 然后在你要放变量的地方var(--color)就可以调用了,

        以上为灵感,结合在vue2博主百度了些资料,搞了个通用方法如下

切记你别连vue-property-decorator也复制了,这里弄vue-property-decorator是告诉你他也可以用



结果如下图

 

扩展

--color 你可以写在vue的computed函数里、或者methods函数里定义一个方法,然后这里style就可以直接:style="style()"这句话要看的懂

data(){return{color:"red",}}

computed: {style() {return {"--color": this.color};}}

博文为雪狼博主原创,博客地址: 雪狼之夜的博客_CSDN博客-vue,eggjs,js领域博主

原创不易,点个赞呗。

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
苏州离哪个飞机场近(苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近,以及苏州离哪个飞机场近点对应的知识点,希望对各位有...