vue 在style标签中引入js变量控制样式

START

如果希望元素的样式根据js代码去控制，常见的办法呢，是在元素的style属性绑定变量即可
例如
```
<h3 :style="{ color: colorList[0] }">1.基本的绑定样式示例</h3>
```
详细用法可参考下面的博客：

https://www.jianshu.com/p/2b82ee1e6199
但是如果style不满足需求，想在style标签中使用变量怎么办？

开始

安装插件css-vars-ponyfill
```
npm i css-vars-ponyfill -S
```

引入插件

import cssVars from 'css-vars-ponyfill'

初始化一下

 created() {cssVars({onlyLegacy: true,variables: {'--component-edit-tablecheck-box-color':this.$store.state.themeModule.theme.currentThemeColor.color,},})},

style中使用

border-color: var(--component-edit-tablecheck-box-color);

完整的代码

<template><div><div class="tomato"> vue 在style标签中引入js变量控制样式 lazy_tomato </div></div>
</template><script>
import cssVars from 'css-vars-ponyfill'
export default {created() {cssVars({onlyLegacy: true,variables: {'--lazy-tomato':'pink'},})},
}
</script><style>
.tomato {background: var(--lazy-tomato);
}
</style>

END

详细使用说明可参考插件官网

vue 在style标签中引入js变量控制样式相关推荐

vue项目在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上并再次npm install 重启项目 "less": ...
Vue超好玩的新特性：在CSS中引入JS变量
授权转载自: 手撕红黑树 https://juejin.im/post/6856668819344392206 幻想以前做项目的时候经常会这么想: <template><h1> ...
html变量改变结构,如何在html结构标签中使用js 变量生成可变化的 title标题?
Virtualbox虚拟机配置CentOS7.0静态网络 1.首先在Virtualbox下将网络设置为Bridged Adapter,此项设置可以使本机与虚拟机进行互访,而NAT模式只能进行单项访问: ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
Vue超好玩的新特性：在CSS中使用JS变量
前言以前在翻译<Vue 3:2020年中状态更新>的时候,文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本),8月初发布3.0正式版. 不过现在已经八月初了怎么还是没发布呢?这个月初 ...
vue如何在style标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
Vue项目在标签中如何书写多个内敛style样式
Vue项目在标签中如何书写多个内敛style样式例如:对一个数组进行循环,我想给偶数项的添加红色背景,奇数项的添加蓝色背景,这时候就可以用v-bind:style="[]",详细 ...
style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
在ts文件中引入js模块，编写声明文件的方法
一.声明文件的作用在ts文件中引入js文件,由于js代码中没有类型约束,所以ts无法获得js代码的类型信息,进而会隐式推断js中类型为any,失去了ts代码类型推断和约束的作用,声明文件就是将一个j ...

vue 在style标签中引入js变量控制样式

START

开始

完整的代码

END

vue 在style标签中引入js变量控制样式相关推荐

最新文章

热门文章