切换效果的实现：

1、做切换效果的技术（样式绑定）

2、组件或者模块的切换（动态组件 v-if/v-show）

3、路由切换（router）

样式绑定

(1) 对class 属性进行绑定

 

1、v-bind:class 指令也可以与普通的 class 属性共存

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">

2、<div v-bind:class="classObject"></div>

3、数组语法

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

(2)对style 进行绑定

1、v-bind:style = "{color:'red'}"

2、:style = "[color:'red',fontSize]"

3、:style = "[{color:'red'},fontSize]"

 

标签：style,样式,绑定,color,切换,class,red
来源： https://www.cnblogs.com/LIXI-/p/16639069.html