Css中使用Vue的变量_vue css变量-程序员宅基地
技术标签： css vue.js javascript
应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)
1.css中如何用变量
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。
<span
v-for="tag in visitedViews"
:key="tag.path"
class="tags-view-item" //默认样式
:style="spanStyle" // 根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
:class="isActive(tag) ? 'active' : ''"
>
{
{
tag.title }}
</span>
export default {
data() {
return {
spanStyle: {
"--color": this.$store.state.settings.theme //默认值
}
};
watch: {
//侦听store里某个属性的变化
"$store.state.settings.theme": function(val) {
this.spanStyle["--color"] = val;
},
},
<style>
.tags-view-item {
//...
&.active {
background-color: var(--color);
color: #fff;
border-color: var(--color);
&::before {
}
}
}
}
</style>
渐变按钮的示例
<span class="btn"
@click="jumCZ"
:style="randomColor"//根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
>
充值
</span>
export default {
data() {
return {
randomColor: {
"--color": "#1a73e8" // 默认值
}
};
},
watch: {
//侦听store里的settings模块下的state里的 theme 发生变化 产出随机颜色
"$store.state.settings.theme": function(val) {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
this.randomColor["--color"] = "#" + randomColor;
}
},
}
<style>
.btn {
width: 70px;
height: 20px;
background-image: linear-gradient(
to right,
var(--color) 0%, //使用data中的变量
#79cbca 51%,
#77a1d3 100%
);
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
border-radius: 10px;
display: block;
cursor: pointer;
font-size: 14px;
line-height: 18px;
}
.btn:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
</style>
智能推荐
小程序开发者工具正常显示，但是真机调试和真机中安卓加载正常ios加载首页失败，首页的请求返回204_苹果 sec-fetch-dest-程序员宅基地
文章浏览阅读125次。检查请求头中的’sec-fetch-dest’: ‘document’ ，是否进行了特殊处理（node层）_苹果 sec-fetch-dest
ansible 批量安装zabbix-agent-程序员宅基地
文章浏览阅读321次。服务器初始化（这是在建立在新的服务器基础上做的初始化）关闭防火墙、selinux，添加epel常用源，安装常用工具、添加普通用户并禁止root1、服务器批量初始化[root@fwd ansible]# cat init.yml 系统初始化脚本---- hosts: all tasks: - name: disable selinux、firew..._ansible批量安装zabbix-agent
java日志系统--log4j配置解析过程，源码分析_log4j 源码分析 读取配置-程序员宅基地
文章浏览阅读1.4w次，点赞3次，收藏2次。Logger.getLogger(Test.class);从getLogger开始，就启动了log4j的整个工作流程，通过调用LogManager获取logger实例return LogManager.getLogger(clazz.getName());LogManager类里面有个静态块static{}，【初始化重要信息】【root logger】，做一些配置，其中url = Loader.ge_log4j 源码分析 读取配置
心灵震撼《一个8岁女孩的遗书》看完能有几人不哭…-程序员宅基地
文章浏览阅读533次。无奈的父亲有一个美丽的小女孩，她的名字叫余艳，她有一双亮晶晶的大眼睛她有一颗透明的童心.她是一个孤儿，她在这个世界上只活了8年，她留在这个世界上最后的一句话是“我来过，我很乖”她希望死在秋天，纤瘦的身体就像一朵花自然开谢的过程.在遍地黄花堆积，落叶空中旋舞的时候，她会看见横空远行的雁儿们.她自愿放弃治疗，把全世界华人捐给她的54万分成了7份，把生命当成希望的蛋糕分给了7个正徘徊在生死线上的小
C++音视频开发从放弃到入门 （基于FFmpeg+OpenCV）-程序员宅基地
文章浏览阅读1.1w次，点赞12次，收藏88次。音视频开发一定要学C++吗？答案是肯定的。虽然其它语言也能搞音视频开发，甚至使用起来更简单，但“语言越高级，离真相就越远”，当你的功能需求日益增多，程序的性能需求越来越迫切，你想进一步了解程序实现的细节时，使用其它语言往往会面临“无法解决”的困境，最后不得不使用C++来解决问题，我们何不从一开始就使用C++呢？FFmpeg及OpenCV是开源、跨平台的音视频开发SDK，搞音视频开发基本都需要用到它。_c++音视频开发
C# 爬虫 100个明星贴吧_如何用爬虫爬取百度贴吧的贴吧c#-程序员宅基地
文章浏览阅读2.8k次。每个吧 第一页 using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;using System.Text;using System.Text.RegularExpressions;namespace ConsoleApplication8{_如何用爬虫爬取百度贴吧的贴吧c#
随便推点
EV/HEV中的牵引逆变器驱动优化-程序员宅基地
文章浏览阅读1.6k次，点赞42次，收藏35次。什么是牵引逆变器？从本质上讲，牵引逆变器是电动汽车动力系统中的一个子系统，它从电池中获取高电压，并将其转换为交流电压——因此被称为逆变器——并基本上为电机供电。它控制电机速度和扭矩，直接影响效率和可靠性，这正成为牵引逆变器设计的设计挑战。此图片来源于网络如今的电动汽车至少有一个牵引逆变器。有些型号实际上不止一个。一个在前轴上，一个在后轴上。甚至一些高端车型实际上每个车轮都有一个牵引逆变器。因此，效率和可靠性非常重要。所以，从逆变器和电机控制的市场趋势来看——从技术趋势来看，我们看到了功率水平的提高。
Ubuntu之apt命令_ubuntu18.04 atp命令使用技巧-程序员宅基地
文章浏览阅读134次。简介apt-cache和apt-get是apt包的管理工具，他们根据/etc/apt/sources.list里的软件源地址列表搜索目标软件、并通过维护本地软件包列表来安装和卸载软件。查看本机是否安装软件：whereis package_name 或者which package_name1.搜索软件sudo apt-cache search pa..._ubuntu18.04 atp命令使用技巧
查询Dynamics 365的Audit History_dynamics 审核历史记录如何查询-程序员宅基地
文章浏览阅读150次。【代码】查询Dynamics 365的Audit History。_dynamics 审核历史记录如何查询
python yield函数的用法-程序员宅基地
文章浏览阅读1.3w次，点赞15次，收藏66次。什么是yield函数?yield函数是python里面的关键字,带有yield的函数相当于一个生成器generator.当你使用一个yield的时候，对应的函数就是一个生成器在python里面类似于return函数,他们主要的区别就是:遇到return会直接返回值,不会执行接下来的语句.但是yield并不是,在本次迭代返回之后,yield函数在下一次迭代时，从上一次迭代遇到的yield后面的代码(下一行)开始执行下面是案例分析:案例一:def gen_generator(): yiel_yield函数
【QT笔记】QFile读文件问题_qfileread后指针会移动吗-程序员宅基地
文章浏览阅读917次。如果不用seek(0)的话，默认是自己会把读取文件的指针后移的，不用手动后移；_qfileread后指针会移动吗
dw8051基本测试示例_dw8051 part1-程序员宅基地
文章浏览阅读2.5k次。整理了网上一份简单的dw8051测试示例，共享到云盘：http://pan.baidu.com/s/1bnu9lZT1.目录如下：---dut ---rtl：DW8051的core文件 ---model：ROM和RAM的model文件---testbench ---rtl.f：filelist文件 ---test_top.v：仿真的top_dw8051 part1