vue中css变量的使用

已于 2023-03-16 17:53:55 修改
阅读量5.5k 收藏 7
点赞数 2
分类专栏： css vue 文章标签： css vue.js javascript
于 2022-12-07 14:58:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53474595/article/details/128220347
版权
vue 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
css
9 篇文章 0 订阅
订阅专栏

1、在css中使用变量

1、css中声明变量

--color：red

2、使用变量

color:var(--color)   //color:red获取到全局声明变量值为red

2、使用vue中的变量


（1）、在htm标签中

<span :style="{'--color':变量color}" ref='devcolor' />

data中声明变量color

data(){

retrun {

color:red}}

或者使用this.$refs.devcolor.style.setProperty('--color',this.color)

（2）、css中使用color变量

color:var(--color)  //使用变量color：red

示例如下：

c8e70436729545a9a5ead9ba9854852f.png
 

f75780ef77254a3ea802d096256cd744.png 

 

 

小储今天暴富了
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue scss使用data中定义的变量
weixin_41881346的博客
04-19 5956
1、 定义变量 bgColor:{ type:String, default:"#45A8ED" } 2、template 中引入 <span :style="{'--bgColor':bgColor}">{{item}}</span> 3、css中写入 .cs{ background-color: var(--bgColor); padding: .208333rem .35rem; border
vue中的css动画效果
zl13015214442的博客
02-24 1362
我们通过一个例子来理解，想实现的效果是点击动画按钮，文字“hello world”由显示到逐渐消失，再点击，逐渐显示。一般来说想要哪个元素有动画效果，就要在外面包裹一层transition标签，如下： &lt;div id="root"&gt; &lt;transition name="fade"&gt; &lt;div v-if="show"&gt;hello world&amp
在VUE style中使用data中的变量的方法
10-15
主要介绍了在VUE style中使用data中的变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 在css中使用js变量
最新发布
weixin_52040333的博客
05-30 357
Vue3 在css中使用js变量。
Css中使用Vue的变量
FellAsleep的博客
05-11 3835
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)声明css变量的时候，变量名前面要加两根连词线（–）。第二个参数不处理内部的逗号或空格，都视作参数的一部分。var()函数用于读取变量。
vue使用CSS 变量
时光清浅处，一步一安然
08-04 5950
在我们知道什么是CSS变量之后，我们尝试把它在项目中运用起来，一些需要动态计算的值，我们就可以使用它快速的实现效果。以下为示例二，有的时候，一些属性我们可能需要根据一些条件计算得来，那么也能很好的去使用它。首先，我们要先知道什么是CSS变量，可以先看这篇。就能根据传入的值达到对应的效果呢？中书写的，那么如何不使用。......
vue如何在css样式种使用data中的变量
wu_yans的博客
02-18 2326
vue中实现了在样式里使用js变量的方法，及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。
vue3和vue2 使用css变量的方法（附带scss的使用方式）
柑橘乌云_
05-06 8657
通过内联样式写css变量（可以调用js里面的变量），如何在style标签里面就可以使用css变量。这么写在 scss 是会编译报错的。建议写成第二种这种计算属性的方式，当值发生改变，也可以响应变化。直接在style标签里面使用v-bind绑定js里面的变量。会将双引号自动去掉，从而得到。，解决了编译失败的问题。
前端Vue日常工作中--CSS变量
梨子社区
01-30 1662
在模板中，我们使用了Vue的动态绑定 :style="{ '--main-color': mainColor }"，将mainColor数据属性的值传递给CSS变量 --main-color，从而动态改变主要颜色。在样式中，我们使用了CSS变量 --main-color 来定义背景颜色、文本颜色和按钮的背景颜色。--main-color 变量用于定义主要颜色，然后在 body 的背景和 h1 的颜色中使用这个变量。', // 初始化文本。body 元素的背景颜色就会应用 --main-color 的值。
详解在Vue中有条件地使用CSS类
08-29
"在Vue中有条件地使用CSS类" 在Vue中有条件地使用CSS类是非常重要的，因为在Web开发中，我们经常需要根据不同的条件来更改元素的CSS类名。例如，在翻页效果中，我们需要根据当前浏览的页面来应用高亮的CSS类名，...
基于vue中css预加载使用sass的配置方式详解
08-27
要在 Vue 中使用 SASS，需要安装 SASS 的依赖包，并在 Webpack 配置文件中添加 SASS 加载器。下面是详细的配置步骤： Step 1：安装 SASS 依赖包 首先，需要安装 SASS 的依赖包，使用以下命令： ``` npm install --...
vue2中使用sass并配置全局的sass样式变量的方法
12-01
Sass语言  Sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、...在vue中，我们可以使用<style lang="scss"></style>来标志里面的内容是以SCSS语法来书写的
vue3中 css的变量
weixin_43845059的博客
04-23 4583
vue3中css的变量
vue中css使用变量
aleluye的博客
11-09 1万+
1、在css中使用变量 1、css中声明变量 --color：red 2、使用变量 color:var(--color) //color:red获取到全局声明变量值为red 2、使用vue中的变量 1、再htm标签中 <span :style="{'--color':变量}" ref='devcolor'/> 或者使用this.$refs.devcolor.style.setProperty('--color',this.color) 2、css中使用color变量 c...
vue 中使用 css 变量
https://github.com/QAQDFAFD
03-13 421
【代码】vue 中使用 css 变量。
CSS 变量
Noctis99的博客
09-23 218
c
vue怎么全局引入scss文件中的变量和样式
qq_54646196的博客
04-15 372
vue怎么全局引入scss文件中的变量和样式 1.在根目录找到vue.config.js文件，没有就创建。
CSS中的变量使用，var()语法
热门推荐
joe_dev的博客
12-16 1万+
惯例先看代码： :root{ --white-max: #fff; --white-bright: #f5f5f5; --white-light: #eee; --white-dark: #ddd; } .navbar ul>li>a{ color: var(--white-max); font-size: 1.1em; font-weight: bol
vue 修改css变量
12-23
在Vue中修改CSS变量可以通过以下步骤实现： 1. 在Vue组件的样式中声明CSS变量。可以使用`:root`伪类选择器来声明全局的CSS变量，也可以在具体的组件样式中声明局部的CSS变量。例如： ```css :root { --primary-color: #ff0000; } .my-component { --background-color: #ffffff; } ``` 2. 在模板中使用CSS变量。可以使用`var()`函数来引用CSS变量。例如： ```html <template> <div class="my-component" :style="{ backgroundColor: 'var(--background-color)' }"> <p :style="{ color: 'var(--primary-color)' }">Hello, Vue!</p> </div> </template> ``` 3. 修改CSS变量的值。可以通过Vue的数据绑定机制来动态修改CSS变量的值。例如，在Vue组件的`data`选项中定义一个变量，并在模板中使用该变量来修改CSS变量的值。例如： ```html <template> <div class="my-component" :style="{ backgroundColor: dynamicBackgroundColor }"> <p :style="{ color: dynamicPrimaryColor }">Hello, Vue!</p> </div> </template> <script> export default { data() { return { dynamicBackgroundColor: 'var(--background-color)', dynamicPrimaryColor: 'var(--primary-color)' }; }, mounted() { // 修改CSS变量的值 this.dynamicBackgroundColor = '#000000'; this.dynamicPrimaryColor = '#00ff00'; } }; </script> ``` 通过以上步骤，你可以在Vue中修改CSS变量的值，实现自定义样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值