md/vue/vue2 下css技巧.md

vue下动态css技巧

该文章主要适用于vue2.x 的项目

不倾入的方式修改style属性

#c 直接修改style属性
在vue 项目中,可以通过:style的方式动态修改style的属性.
但是这种方法会因为style属性在css选择器中的优先级问题,
导致后续其它功能无法修改style属性. 所以这种方法在某些情况下,
不能满足需求. 虽然可以给后续的属性添加!important属性来达到覆盖的目的,
但是这样写代码,会增加代码的复杂度.所以我们可以通过css变量的方式来达到修改style属性的目的.

#d css变量
css变量是css3新特性,通过--开头的变量,可以定义变量, 然后通过var()函数,来引用变量.

#e css变量修改style属性
示例vue代码, 修改data中的color属性,
从而实现文字默认颜色可以根据data中的color属性来修改文字颜色,
并且在鼠标移动上去时,字体颜色为蓝色

<script>
  export default {
      data(){
          return {
              color:'red'
          }
      }
  }
</script>
<template>
  <span class="test"
       :style="`--color: ${color};`"
  >
    hello
  </span>
</template>
<style>
  .test{
    --color:red;
    color:var(--color);
  }
  .test:hover{
    color:blue;
  }
</style>