vue 中动态绑定class 和 style的方法代码详解

class="['content',{'radioModel':checkType}]"  
class="['siteAppListDirNode',{open:appitem.open==true}]" 
class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" 
class="{shortcutMenuShow:!showHideNav,shortcutMenuHide:showHideNav}" 
style="{height:checkType?'423px':'385px'}" 
src="userInfo.userFace?userInfo.userFace:defaultHead" 

<a v-bind:href="https://.jb51./">狼蚁SEO首页</a>

<a :href="https://.jb51./">狼蚁SEO首页</a>

<div :class=" 'classA classB' ">Demo1</div>

<div class="classA classB">Demo1</div>

<div :class="classA">Demo2</div>

data: {
 classA: 'class-a' //当classA改变时将更新class
}

<div class="class-a">Demo2</div>

<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

<div class="class-a">Demo3</div>

<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

data: {
 isA: false, //当isA改变时，将更新class
 isB: true  //当isB改变时，将更新class
}

<div class="class-b">Demo4</div>

<div :class="objectClass">Demo5</div>

data: {
 objectClass: {
  class-a: true,
  class-b: false
 }
}

<div class="class-a">Demo5</div>

<div :class="[classA, classB]">Demo6</div>

data: {
 classA: 'class-a',
 classB: 'class-b'
}

<div class="class-a class-b">Demo6</div>

<div :class="[classA, classB]">Demo7</div>

data: {
 classA: 'class-a',
 objectClass: {
  classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表
  classC: false,  // classC值为false,将不添加classC
  classD: true  // classD 值为true，classC将被直接添加到class列表
}
}

<div class="class-a class-b classD">Demo7</div>