开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情

vue中的style和class的动态绑定

🍎 在Vue之中将 Class通过两种方式进行绑定：

对象语法
数组语法

❤️ 1、通过对象方法进行绑定：

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

= >  省略以后写成

<div :class="{ active: isActive, 'noactive': hasError }"></div> 
  
data: {  
    isActive: true,  
    hasError: false  
}

❤️ 2、通过数组方法进行绑定：

需要注意的是：

数组形式(类名必须用''包起来)：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 
  
data: {  
    activeClass: 'active',  
    errorClass: 'text-danger'  
}

进一步：在数组中使用三元表达式：

<div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>

3.数组中嵌套对象

通过数组，对象相互配合的方式实现更多的可能

<div :class="['red', 'thin', {'active': isactive}]">内容</div>

data:{isactive:true,}

isactive值的说明："{'active': isactive}"中的“isactive”的值为true时，那么使用该类。为false就不使用该类。

4.直接使用对象：

<div :class="{red:true, italic:true, active:true, thin:true}">内容</div>

说明：此对象中，键与值一一对应，当前值为true的时候，当前对应的键（也就是类名）就使用，为false就不应用。

遇到一些不需要我们进行选择，不需要做出动态时候的类，可以使用以下方法：不需要动态绑定的类

<div class="static" :class="{'active':isActive,'error':isError}"></div>

Style两种方式进行绑定：

对象语法
数组语法

对象语法：

1、动态style之后直接放一个对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  
  
data: {  
    activeColor: 'red',  
    fontSize: 30  
}

如果对象的键有特殊符号“-”等等，那么要用引号括起来。

<div :style="{color: 'red', 'font-size': '40px'}">这是一个文本</div>

2.将样式对象，定义到 data 中，并直接引用到 :style 中

data: {
      styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
  }

3、数组语法：

<div v-bind:style="[styleColor, styleSize]"></div>  

data: {  
    styleColor: {  
    color: 'red'  
},  
styleSize:{  
    fontSize:'23px'  
   }  
}

简写方式为：

<div :style="[styleColor, styleSize]"></div>

🍓需要格外注意的点

绑定样式名时，如果写成驼峰命名，则不需要引号，如果是复杂命令，则需要加引号

🍓 应用

功能需求1：多个静态动态类型拼接

🌟 面对两个类名并且其中一个静态，一个动态时，绑定的方式为：

<div v-for="val in itemvalue">
    <i :class="`iconfont`+val.name"></i>
</div>

数据格式

itemvalue:[{value:'12',name:'search'},{value:'16',name:'add'}],

vue之 style和class的动态绑定玩到极致