- 說明
- 設(shè)置一個(gè)對(duì)象，可以動(dòng)態(tài)地切換class
- 對(duì)象中也可以傳入多個(gè)屬性损痰，來動(dòng)態(tài)切換class,另外，:class可以與普通class共存
- class的表達(dá)式過長(zhǎng)或者邏輯復(fù)雜時(shí)候尘盼，還可以綁定一個(gè)計(jì)算屬性，這是一種友好和常見的用法肪凛，一般當(dāng)條件多于兩個(gè)時(shí)态蒂，都可以使用data或者computed
- 基礎(chǔ)使用
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
</style>
<div id="app">
<button :class="btnClass">綁定對(duì)象</button>
</div>
<script>
/**
* 靜態(tài)綁定
*/
new Vue({
el: "#app",
data: {
// 當(dāng)btnClass改變時(shí)將更新class
btnClass:'btn'
}
})
</script>
<!--渲染之后 -->
<button class="btn">綁定按鈕</button>
- 綁定對(duì)象
<style>
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
</style>
<div id="app">
<!-- 這里的active單引號(hào)可加不加可不加 多個(gè)對(duì)象用,逗號(hào)隔開 -->
<!-- 注意使用-命名一定要加下 單引號(hào) '' -->
<p class="btn" :class="{ 'active':isActive,'btn-default':isDefault }" v-text="shop.title"></p>
</div>
<div id="app">
<button :class="{btn:isActive,'btn-default':isDefault}">綁定按鈕</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: false
isDefault: true,
}
})
</script>
<!-- 渲染之后 -->
<button class="btn btn-default">綁定對(duì)象</button>
- 綁定多個(gè)對(duì)象(data里面中聲明)
:class="btnClass"
<script>
new Vue({
el: "#app",
data: {
btnClass:{
btn:isActive,'btn-default':isDefault
}
}
})
</script>
- 綁定多個(gè)對(duì)象(computed里面中聲明)
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
<div id="app">
<button class="btn" :class="btnClass" @mouseenter="isEnter" @mouseleave="isLeave">綁定多個(gè)屬性</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isActive: false,
isDefault: true,
},
computed: {
btnClass: function () {
return {
'btn-default': this.isDefault,
'active': this.isActive,
}
}
},
methods: {
isEnter: function () {
this.isActive = true;
},
isLeave: function () {
this.isActive = false;
}
}
})
- 說明
當(dāng)需要應(yīng)用多個(gè)class，可以使用數(shù)組語(yǔ)法吃媒，給:class 綁定一個(gè)數(shù)組瓤介，應(yīng)用一個(gè)class列表
- 單純數(shù)組
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
</style>
<div id="app">
<button class="btn" :class="['btn-default','active']">綁定多個(gè)屬性</button>
</div>
<script>
const vm = new Vue({
el: "#app",
})
</script>
<!--渲染之后 -->
<button class="btn btn-default active">綁定多個(gè)屬性</button>
- 數(shù)組+對(duì)象+三則運(yùn)算
<style type="text/css">
.btn {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
</style>
</head>
<body>
<div id="app">
<!-- 注意 class最好加上單引號(hào)，否則有可能不能正確渲染-->
<!-- <button class="btn" :class="['btn-default','active']">綁定多個(gè)屬性</button>-->
<!-- 不能使用data里的對(duì)象,否則不能正確渲染-->
<button class="btn" :class="[{active: isActive},isDanger ? 'btn-danger':'']">綁定數(shù)組</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
btnDefault: 'btn-default',
isActive: true,
isDanger: true,
},
})
</script>
<!--渲染后 -->
<button class="btn active btn-danger">綁定數(shù)組</button>
- 說明
使用v-bind:style="" 或者:style語(yǔ)法，style與class類似氯质，可以給元素綁定內(nèi)聯(lián)樣式,也有對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,看起來很直接在元素上寫CSS
- 基本使用
<div id="app">
<a href="#" :style="{'color':color,'font-size':fontSize + 'px','text-decoration':textDecoration}">綁定內(nèi)聯(lián)樣式</a>
</div>
<script>
/**
* 靜態(tài)綁定
*/
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 18,
textDecoration: 'none'
}
})
</script>
- 綁定對(duì)象動(dòng)態(tài)修改
<div id="app">
<a href="#" :style="aStyle" @mouseover="aMouseOver" @mouseout="aMouseOut">直接使用對(duì)象</a>
</div>
<script>
/**
* 靜態(tài)綁定
*/
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 18,
textDecoration: 'none',
// 或者
aStyle: {
color: 'black',
fontSize: 18 + 'px',
textDecoration: 'none',
},
},
methods: {
aMouseOver: function () {
this.aStyle.color = 'red'
},
aMouseOut: function () {
this.aStyle.color = 'black'
}
}
})
- 綁定數(shù)組
<div id="app">
<!-- 在實(shí)際業(yè)務(wù)中, :style的數(shù)組語(yǔ)法并不常用,因?yàn)橥梢詫懺谝粋€(gè)對(duì)象里面 -->
<a href="#" :style="[aBase,aFont]">綁定數(shù)組</a>
</div>
<script>
/**
* 靜態(tài)綁定
*/
new Vue({
el: "#app",
data: {
aBase: {
color: 'red',
},
aFont: {
fontSize: 16 + 'px',
textDecoration: 'none',
},
},
})
