vue 中動態(tài)綁定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:>腳本之家首頁</a>

<a :>腳本之家首頁</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>