如何实现vue动态改变css样式？

在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？我自己总结了在开发中，个人用的比较多的两种方式

方式一：.class,三元表达式

根据三元表达式来动态的在两种样式间切换

:class="[ation === '请选择'?'text-blue':'text-red']"

css:

.text-blue:{

color:blue;

}

.text-red:{

color:red;

}

方式二：

:style="xxx",这里xxx可以是个函数，也可以是个计算属性

<div class="square" :style="{'background-color':isChange?'blue':'red',
'color':isChange?'white':'black'}">测试</div>

isChange是一个变量

注意!CSS property 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，要用引号括起来) 所以以下同等效果