[vue] 如何使用CSS自定义变量

最新推荐文章于 2024-03-29 09:30:19 发布

533_

最新推荐文章于 2024-03-29 09:30:19 发布

阅读量185

点赞数

分类专栏： # vue # css 文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/129867213

版权

vue 同时被 2 个专栏收录

165 篇文章 3 订阅

订阅专栏

css

77 篇文章 1 订阅

订阅专栏

该文章展示了一个Vue组件示例，通过在data中定义变量a并绑定到div的样式上，实现点击事件改变颜色的效果。changeColor方法根据变量a的值在蓝色和红色之间切换，同时CSS使用var()函数根据变量a的值设置文本颜色和鼠标悬停时的背景色。

摘要由CSDN通过智能技术生成

<template>
	<div class="box" @click="changeColor" :style="{'--a' : a}">hello</div>
</template>
export default {
  data(){
    return {
      a : 'blue',
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</script>
<style>
  .box {
      color : var(--a);
  }
  .box:hover {
    background-color : var(--a);
  }
</style>