VUE之v-bind类名与样式绑定 *重点

v-bind

v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改 变任一方数据后都会实时更新。
语法格式：

1. 单个语法格式---- v-bind:attributeName=variable
   

2. 对象语法格式 ----v-bind=“{attributeName1:variable1,attributeName2:variable2,……}

3. 数组语法格式”绑定类名”----v-bind:attributeName=“[variable1,variable2,……]”
   

class-对象语法-单类名切换

给v-bind:class设置一个对象，可以动态切换class。

<div :class="{active:isActive}"></div>       data:{isActive:true}

isActive为true时，结果为<div class="active"></div>
isActive为false时，结果为<div class></div>

class-对象语法-多类名切换

除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。

输出结果为：

class-数组语法-普通数组

当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表。

输出结果为：

class-数组语法-表达式

可以使用三元运算符来根据条件切换class。

输出结果为：

内联样式style-对象语法

v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
例：
输出结果为：

内联样式style-对象包裹语法

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里。
例：

Element显示结果为：