在vue2的style标签中使用css变量
2023-06-13 09:11:18 时间
前两天有一个更换主题需求,想将系统主题包括hover
颜色都更换
代码如下:
<template>
<!-- 需要绑定style -->
<div class="hello" :style="css">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
themeColor: 'red'
}
},
mounted() {
setInterval(() => this.themeColor = "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')', 100)
},
computed: {
css() {
const { themeColor } = this
return {
'--theme-color': themeColor
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
color: #42b983;
transition: color 100ms;
}
a:hover {
color: var(--theme-color)
}
</style>
可以试着把鼠标移动上去,会随机变色
相关文章
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 如何在CSS中使用变量
- 在 PHP 中如何通过一行代码就交换两个变量的值
- MySQL Variables concurrent_insert 数据库 参数变量解释及正确配置使用
- MySQL Variables sha256_password_proxy_users 数据库 参数变量解释及正确配置使用
- Linux命令行中的变量处理(linux命令行变量)
- The Shapes of CSS(css的形状)详解编程语言
- abap编辑器设置:关键字大写,函数名及变量小写的设置详解编程语言
- 利用变量使用变量实现更高效的查询:SQL Server实战指南(sqlserver中如何)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- Oracle普及共享变量新常识(oracle共享变量)
- Oracle中高效利用变量设置值(oracle中设置变量值)
- 对方便食品的底层变量思考:细分品类接下来怎么走?
- 不错的JS中变量相关的细节分析
- php中变量及部分适用方法
- CSS教程之css选择器、属性、值
- 简单的加密css地址防止别人下载你的CSS文件的方法
- 关于JavaScript中var声明变量作用域的推断
- php压缩多个CSS为一个css的代码并缓存
- php中根据变量的类型选择echo或dump
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- Perl中的特殊内置变量详细介绍