# 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属性来修改文字颜色,  
并且在鼠标移动上去时,字体颜色为蓝色
```vue
<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>
```