Vue2：样式绑定/切换效果

切换效果的实现：

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

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

3、路由切换（router）

实例：

样式绑定

(1) 对class 属性进行绑定

 

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

<div :class="{ color:'green', width: w }">

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

3、数组语法

<div v-bind:class="[classname ,' nameClass']"></div>

 

(2)对style 进行绑定

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

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

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