在vue项目开发中，好多地方需要动态去改变元素的样式，例如：更改元素class名去更换元素的样式，或更改元素的style去更改元素样式。元素的显示、隐藏、大小、颜色等，也可以配合vuex使用实现类似主题话的更改。

一、动态更改style

        通过style取值为变量来实现动态控制样式的效果

<template>
  <div :style="{background:yanse,width:kuai,height:gao+'px'}">

  </div>
</template>

<script>
export default {
    data(){
        return{
            yanse:"red",
            kuai:"100px",
            gao:100
        }
    }
}
</script>

<style>

</style>

二、通过class名去更改元素样式

        通过三目运算符来实现元素样式的切换

<template>
  <div :class='state?"red":"blue"'>

  </div>
</template>

<script>
export default {
    data(){
        return{
            state:true,
        }
    }
}
</script>

<style>
    .red{
        width: 100px;
        height: 100px;
        background: red;
    }
    .blue{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>

三、升级用法

        我们项目开发中可能遇到用户自定义主题颜色的需求，我们可以通过vuex来实现全局颜色的更改，将颜色作为一个变量存储在vuex中，通过更改vuex变量的值，实现全局样式的更改。