vue之 style和class的动态绑定

1、绑定Class

需要记住的是：在Vue2中，:class绑定数组的语法应该是每个元素都是字符串或对象，而不是像你这样直接写条件表达式。

正确演示和错误演示

//错误
:class="[
'flexzi flex-text-center',
'flexzi flex-text-center',
'borderb':indexb<(vala.performance.length-1),
'backdeep': indexb % 2 != 0,
]">

//正确
:class="[
  'flexzi flex-text-center',
  { 'borderb': indexb < (vala.performance.length - 1) },
  { 'backdeep': indexb % 2 != 0 }
 ]">

2、Style绑定

👉 字符串形式

🍎普通的类名绑定+函数过滤

// vue2示例
:class="`imgrotate${getFilteredIndexes(rppgdata.syndromeList)}`"

👉对象方法绑定

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

= >  省略以后写成

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

👉数组方法绑定

需要注意的是：

<font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">数组形式(类名必须用''包起来)：

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

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

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

实际之中结合下标进行使用

<div 
:class="[`medtypecontli medtypecontli${index+1}`,item.isMark==0?'':`medtypecontliact`]"
v-for="(item,index) in rppgdata.syndromeList">
  
</div>

👉数组中嵌套对象

需要记住的是：在Vue2中，:class绑定数组的语法应该是每个元素都是字符串或对象，而不是像你这样直接写条件表达式。

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

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

data:{isactive:true,}

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

👉直接使用对象：

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

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

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

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

🍓 应用

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

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

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

数据格式

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

• 对象语法
• 数组语法

👉对象语法：

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

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

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

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

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

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

🍎数组语法

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

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

简写方式为：

<font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);"><div :style="[styleColor, styleSize]"></div>

🍓需要格外注意的点

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