VUE之v-bind类名与样式绑定
DOM元素经常动态绑定一些类名或者style样式，今天来介绍一下使用
v-bind指令绑定class与style的多种方法。
接下来先来简单回顾下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。
语法：传给 v-bind:class 一个对象，以动态地切换 class：
isActive为true时，结果为 isActive为false时，结果为
上面案例中，类名active依赖于数据isActive。当其值为true时，div拥有该类名active，为false时则没有
class-对象语法-多类名切换
除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。
class-对象语法-类名共存
v-bind:class 指令也可以与普通的 class 属性共存
class-对象语法-对象包裹
绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。
class-对象语法-计算属性
当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。
class-数组语法-普通数组
当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表。
class-数组语法-表达式1
可以使用三元/目运算符来根据条件切换class
class-数组语法-数组对象嵌套
当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法
class-数组语法-计算属性
与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种常见的语法。使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。
内联样式style-对象语法
v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
内联样式style-对象包裹语法
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里
内联样式style-计算属性语法
也可以用计算属性用法绑定
以上就是今日的分享内容了，如有问题请留言给小编哦！(╹▽╹)