1. v-bind:指令認(rèn)識(shí)和基本使用
上一小節(jié)的學(xué)習(xí),讓我們理解以v開(kāi)頭的指令后面跟的將是表達(dá)式,同樣標(biāo)簽也有一些合法的標(biāo)簽屬性.如果想將這些屬性的值變?yōu)楸磉_(dá)式,我們可以使用Vue提供的v-bind:指令.
1.1 v-bind 指令基本使用
v-bind:指令會(huì)將普通屬性的值變?yōu)楸磉_(dá)值,比如
<div id="app">
<!-- 使用v-bind指令 -->
<!-- 添加v-bind綁定以后,className將不在是一個(gè)字符串,而是一個(gè)變量,data數(shù)據(jù)的中className -->
<div v-bind:class="className">你好</div>
<!-- 未使用v-bind指令 -->
<div class="className">Hello</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
className:"box"
}
})
</script>
顯示結(jié)果
通過(guò)示例顯示的結(jié)果就了解
未使用v-bind指令的class屬性的值是一個(gè)字符串,表示給標(biāo)簽添加一個(gè)className的類(lèi)名
使用v-bind指令的class屬性值不在是字符串,而是表達(dá)式, 表達(dá)式里的className不是一個(gè)普通的字符,而是一個(gè)變量,Vue實(shí)例data屬性中的數(shù)據(jù)
1.2 簡(jiǎn)寫(xiě)方式
Vue 對(duì)于v-bind指令還提供了簡(jiǎn)寫(xiě)方式,如下
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫(xiě) -->
<a :href="url">...</a>
對(duì)于v-bind指令的認(rèn)識(shí)和基本使用,我們已經(jīng)了解了,
那么接下來(lái)就看看v-bind使用過(guò)程中的一些問(wèn)題和注意項(xiàng)
2. vue 屬性的動(dòng)態(tài)綁定
通過(guò)上面的學(xué)習(xí),我們知道,v-bind 指令可以讓我們將屬性值關(guān)聯(lián)到Vuedata數(shù)據(jù)中,這樣的屬性,我們稱(chēng)作為屬性的動(dòng)態(tài)綁定
屬性的動(dòng)態(tài)綁定比較符合vue以數(shù)據(jù)為驅(qū)動(dòng)的模式,如果需要修改那個(gè)屬性值,就可以直接通過(guò)修改Vue數(shù)據(jù)即可,
例如,項(xiàng)目中的輪播就像輪播圖中的數(shù)據(jù), 在替換輪播數(shù)據(jù)的時(shí)候就會(huì)非常方便
來(lái)個(gè)例子: 動(dòng)態(tài)改變顯示圖片
<div id="app">
<img :src="src" alt="">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
src: "./images/12.png"
}
})
</script>
這個(gè)時(shí)候我們只需要改變數(shù)據(jù)里的src的值,圖片就會(huì)發(fā)生變化
vm.src ="./images/13.jpg"
注意:
動(dòng)態(tài)屬性綁定, 在我們需要的時(shí)候在使用,如果一個(gè)屬性的是是固定的,
并不會(huì)在未來(lái)發(fā)生改變, 就沒(méi)有必要?jiǎng)討B(tài)綁定屬性.
但在屬性動(dòng)態(tài)綁定過(guò)程中有兩個(gè)屬性比較特殊, 這兩個(gè)屬性就是class 和style屬性,
在將 v-bind 用于 class 和 style 時(shí)改含，Vue.js 做了專(zhuān)門(mén)的增強(qiáng)坦辟。表達(dá)式結(jié)果的類(lèi)型除了字符串之外凰荚，還可以是對(duì)象或數(shù)組九府。
接下來(lái)好好研究研究
3 動(dòng)態(tài)綁定class屬性
3.1 動(dòng)態(tài)綁定class的基本使用
3.1.1 動(dòng)態(tài)綁定class與普通class屬性對(duì)比
動(dòng)態(tài)綁定class 就是使用v-bind指令來(lái)綁定, 一但使用v-bind指令后,class屬性的值不在是一個(gè)字符串,而是一個(gè)表達(dá)式,
比如未使用動(dòng)態(tài)綁定示例:
<h2 class="msg">Hello World</h2>
未使用 v-bind指令動(dòng)態(tài)綁定屬性時(shí), class的值就是字符串, 上例中h2有一個(gè)類(lèi)名,類(lèi)名是msg
使用了動(dòng)態(tài)綁定示例:
<h2 v-bind:class="msg">Hello World</h2>
<!-- 可以簡(jiǎn)寫(xiě)為-->
<h2 :class="msg">Hello World</h2>
如果使用動(dòng)態(tài)綁定指令, 那么此時(shí)class后面的引號(hào)不在是字符串,而是一個(gè)JavaScript表達(dá)式, msg也就成為了一個(gè)變量,因此此時(shí)h2標(biāo)簽的類(lèi)名不是字符串msg, 而是數(shù)據(jù)中msg中的值
示例:
<div id="app">
<!-- 未使用動(dòng)態(tài)綁定的class屬性 -->
<div class="msg">hello world</div>
<!-- 使用v-bind 動(dòng)態(tài)綁定class屬性 -->
<div :class="msg">你好! Vue</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data: {
msg:"box"
}
})
</script>
顯示結(jié)果
此時(shí)通過(guò)示例,我們就發(fā)現(xiàn)使用動(dòng)態(tài)綁定class屬性的div,class屬性值被替換為了Vue data屬性中的數(shù)據(jù), 也就是說(shuō)動(dòng)態(tài)綁定class屬性的msg是一個(gè)變量
沒(méi)有使用動(dòng)態(tài)綁定class屬性的值就是一個(gè)普通的字符串msg
3.1.2 動(dòng)態(tài)綁定class與普通class混用
動(dòng)態(tài)綁定class 和 沒(méi)有動(dòng)態(tài)綁定的class可以同時(shí)使用, 不沖突,Vue會(huì)將動(dòng)態(tài)class屬性與普通class屬性在最后顯示是合并到一起
<div id="app">
<!-- 動(dòng)態(tài)綁定class -->
<h2 class="wrap" :class="msg">你好</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg:'box'
}
})
</script>
顯示結(jié)果:
通過(guò)示例結(jié)果發(fā)現(xiàn),這樣使用,h2將有兩個(gè)類(lèi)名,一個(gè)是wrap, 一個(gè)是box,
其中wrap是普通class屬性的值, box是動(dòng)態(tài)class屬性值msg變量在Vue data屬性中所表示的值
2.3 數(shù)組語(yǔ)法
2.3.1 動(dòng)態(tài)綁定class的錯(cuò)誤寫(xiě)法
我們千萬(wàn)不要在動(dòng)態(tài)綁定class屬性中像以前利用空格一樣綁定多個(gè)類(lèi)名
<h2 :class="msg box">Hello World</h2>
這樣的寫(xiě)法就會(huì)報(bào)錯(cuò), 那么如何才能做到使用動(dòng)態(tài)屬性綁定多個(gè)類(lèi)名呢,
2.3.2 動(dòng)態(tài)綁定多個(gè)類(lèi)名
有的時(shí)候我們希望可以在一個(gè)DOM元素上動(dòng)態(tài)綁定多個(gè)類(lèi)名,
因?yàn)閯?dòng)態(tài)綁定的class值是表達(dá)式,我們就可以利用數(shù)組來(lái)羅列多個(gè)動(dòng)態(tài)綁定的類(lèi)名,
因此可以 v-bind:class動(dòng)態(tài)綁定class值中協(xié)商數(shù)組是复，使用數(shù)組來(lái)羅列多個(gè)綁定的class類(lèi)名
示例入校:
<div id="app">
<h2 :class="[boxClass,wrapClasss]">你好</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
boxClass:"box",
wrapClass:'wrap'
}
})
</script>
這樣渲染出來(lái)的結(jié)果h2 標(biāo)簽會(huì)同時(shí)擁有box 和wrap兩個(gè)類(lèi)名
2.3 對(duì)象綁定
2.3.1 動(dòng)態(tài)綁定class值的處理邏輯
既然動(dòng)態(tài)綁定class的值是表達(dá)式,那么我們就可以在表達(dá)式里,寫(xiě)一些基本的表達(dá)式處理數(shù)據(jù),
通過(guò)邏輯的判斷來(lái)決定要不要給DOM元素添加這個(gè)類(lèi)名
比如
<div id="app">
<!-- 動(dòng)態(tài)class值中寫(xiě)入三目運(yùn)算符邏輯 -->
<!-- 此時(shí)變量isTrue的值如果為true, 則顯示變量msg所表示的值 -->
<!-- 如果isTrue為false, 則為空字符串 -->
<!-- 1. isTrue值為 true時(shí) -->
<h2 :class="isTrue ? msg : ''">你好</h2>
<!-- 1. isTrue值為 false時(shí) -->
<h2 :class="!isTrue ? msg : ''">hello</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isTrue:true,
msg:'box'
}
})
</script>
示例結(jié)果:
通過(guò)實(shí)例,我們會(huì)發(fā)現(xiàn), 當(dāng)isTrue 的值為 true時(shí),h2標(biāo)簽有類(lèi)名, 為false是,值為空字符串,無(wú)類(lèi)名.
因此通過(guò)這個(gè)例子,我們就可以利用數(shù)據(jù)isTrue布爾值的判斷來(lái)切換類(lèi)名,改變樣式
示例如下:
<style>
.box{
color:red;
}
.wrap{
color:skyblue;
}
</style>
<div id="app">
<h2 :class="isTrue ? msg : 'wrap'">你好</h2>
<button @click="changClassName">點(diǎn)擊切換顏色</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isTrue:true,
msg:'box'
},
methods:{
changClassName(){
this.isTrue = !this.isTrue
}
}
})
</script>
上面的實(shí)例, 在點(diǎn)擊是button按鈕時(shí), 會(huì)切換h2標(biāo)簽的類(lèi)名,同時(shí)會(huì)改變h2的字體樣式.
注意:又到了教會(huì)你們,卻不推薦你們使用的時(shí)刻來(lái)了
你要問(wèn)我為什么不推薦用?
那么我們不妨自己想一想,如果我一個(gè)標(biāo)簽上有多個(gè)需要?jiǎng)討B(tài)切換的類(lèi)名怎么辦
我們是不是會(huì)想到如下的寫(xiě)法:
<h2
:class="isTrue ? msg : ''"
:class="flag ? 'haha' : ''"
>你好</h2>
如果你真的這么寫(xiě)了, 你會(huì)發(fā)現(xiàn),后面動(dòng)態(tài)綁定的class沒(méi)有任何效果, 所以這種寫(xiě)法是有問(wèn)題的
同時(shí)我們也會(huì)發(fā)現(xiàn)這種三目表達(dá)式切換類(lèi)名也不是特別友好,
此時(shí)此刻,此情此景, 我們就不得不探討一下兩個(gè)問(wèn)題?
- 如何更好的切換類(lèi)名
- 如何綁定多個(gè)動(dòng)態(tài)的切換
喝口水,接著往下聊.
2.3.2 動(dòng)態(tài)多個(gè)類(lèi)名切換
上回咱們聊到,如何解決如何更好的綁定多個(gè)類(lèi)名的切換.
都已經(jīng)知道了動(dòng)態(tài)綁定class的值是表達(dá)式, 所以我們可以將 v-bind:class值 寫(xiě)成一個(gè)對(duì)象降淮，以動(dòng)態(tài)地切換 class：
<div :class="{ box:isTrue }"></div>
語(yǔ)法說(shuō)明:
- 上面的語(yǔ)法表示:
box這個(gè) 類(lèi)名是否存在 將取決于數(shù)據(jù)屬性isTrue的 布爾特性汹来。 - 如果
isTure的值為true, 那么div將有類(lèi)名box否則,div沒(méi)有box類(lèi)名 - 需要注意,此時(shí)
box就是一個(gè)類(lèi)名,并不是vue中的數(shù)據(jù)屬性
因?yàn)閷?duì)象可以有多個(gè)屬性值對(duì), 因此我們可以在對(duì)象中傳入更多屬性來(lái)動(dòng)態(tài)切換多個(gè) class贼穆。
<div :class="{ box:isTrue, wrap: !isTrue }"></div>
寫(xiě)法說(shuō)明:
- 當(dāng)isTrue的值為
true,是div的類(lèi)名為box, 此時(shí)!isTrue的值就是false, 所有div沒(méi)有wrap類(lèi)名 - 如果
isTrue的值為false則情況相反,
2.3.3 修改示例
此時(shí),我們就可以利用所學(xué)重新修改上面點(diǎn)擊改變樣式案例的寫(xiě)法
<style>
.box{
color:red;
}
.wrap{
color:skyblue;
}
</style>
<div id="app">
<h2 :class="{box:isTrue, wrap: !isTrue}">你好</h2>
<button @click="changClassName">點(diǎn)擊切換顏色</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isTrue:true,
},
methods:{
changClassName(){
this.isTrue = !this.isTrue
}
}
})
</script>
這樣我們就可以做到兩個(gè)類(lèi)名之間的切換, 如果希望有多個(gè)類(lèi)名切換, 可以繼續(xù)給對(duì)象添加屬性
4. 綁定行內(nèi)樣式
v-bind動(dòng)態(tài)綁定屬性除了class比較特殊外,還有一個(gè)style行內(nèi)樣式屬性也比較特殊
4.1 未使用vue 動(dòng)態(tài)綁定屬性的行內(nèi)樣式
<h2 style="color:red;font-size:30px;">Hello World</h2>
顯示結(jié)果:
需求分析：
- 和其他動(dòng)態(tài)綁定屬性一樣,有的時(shí)候,我們就希望樣式的值是可以動(dòng)態(tài)變化的.
- 那么我們就需要使用到
v-bind動(dòng)態(tài)綁定屬性的指令, - 同時(shí)使用動(dòng)態(tài)綁定屬性以后,
style屬性的值將變成表達(dá)式. 以前的寫(xiě)法就不太合適了 - 既然是表達(dá)式,我們就可以使用對(duì)象和數(shù)組方式羅列樣式.
先看看值為對(duì)象的用法
4.2 對(duì)象語(yǔ)法
4.2.1 動(dòng)態(tài)綁定style屬性的基本用法
動(dòng)態(tài)綁定style屬性說(shuō)明:
- 如果使用動(dòng)態(tài)綁定屬性方法綁定行內(nèi)樣式,那么style屬性值將不再是字符串,而是表達(dá)式,
- 動(dòng)態(tài)綁定style的值既然是表達(dá)式哼御，那么就可以在表達(dá)式中使用對(duì)象.
- 如果值為對(duì)象,那么對(duì)象的屬性名則為CSS樣式屬性, 值為樣式的值坯临。
- 注意,此時(shí)對(duì)象中的屬性值,可以是確定的樣式值,也可以是vue的數(shù)據(jù)變量,
- 因此有些值不能再像
style標(biāo)簽中一樣書(shū)寫(xiě),例如50px,以前使用不加引號(hào),現(xiàn)在必須加引號(hào)
4.2.2 對(duì)象寫(xiě)法關(guān)于值的問(wèn)題
如果使用動(dòng)態(tài)綁定屬性style里的對(duì)象值不加引號(hào), 就會(huì)有如下的問(wèn)題:
例如
<h2 :style="{color:red,font-size:30px}">Hello World</h2>
上面的這種寫(xiě)法就會(huì)報(bào)錯(cuò), red和30px會(huì)被當(dāng)做變量去Vue data屬性中找對(duì)應(yīng)的數(shù)據(jù), 但是找不到就報(bào)錯(cuò)
正確的寫(xiě)法應(yīng)該是這樣的
<h2 :style="{color:'red',fontSize:'30px'}">Hello World</h2>
也能正確顯示結(jié)果, 但是要注意字符串嵌套問(wèn)題
4.2.3 對(duì)象寫(xiě)法的屬性問(wèn)題:
相信通過(guò)剛才的例子,你也發(fā)現(xiàn)了,我們發(fā)font-size 的寫(xiě)法改為了fontSize.
因?yàn)镃SS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case) 都可以：
因此,在普通的style屬性中一下兩種寫(xiě)法都可以
<!-- 駝峰式 (camelCase) 寫(xiě)法 --->
<h2 style="color:red;fontSize:30px;">Hello World</h2>
<!-- 短橫線分隔 (kebab-case --->
<h2 style="color:red;font-size:30px;">Hello World</h2>
但是一旦使用了動(dòng)態(tài)綁定, style屬性的值將變成JS表達(dá)式,
表達(dá)式里的大括號(hào)即為JS對(duì)象, 對(duì)象屬性的標(biāo)識(shí)符是不支持-連字符的,
如果我們有兩種處理方案,
- 駝峰式 (camelCase)
- 如果要使用連字符, 就需要添加雙引號(hào), 將屬性變成字符串的寫(xiě)法
因此動(dòng)態(tài)綁定需要如下寫(xiě)法
<!-- 駝峰式 (camelCase) 寫(xiě)法 --->
<h2 :style="{color:'red', fontSize:'30px'}">Hello World</h2>
<!-- 短橫線分隔 (kebab-case) 但是要加引號(hào) --->
<h2 :style="{color:'red', 'font-size' :'30px'}">Hello World</h2>
推薦用駝峰寫(xiě)法, 對(duì)象的值也可以是變量
<div id="app">
<h2
:style="{color:'red', fontSize: fontSize}"
>Hello World</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fontSize: "30px"
}
})
</script>
動(dòng)態(tài)屬性style的樣式值,CSS屬性中,color 是字符串'red'值, 字體大小font-size的值確實(shí)vue數(shù)據(jù)中fontSize的值,顯示結(jié)果沒(méi)有任何變化
這樣也會(huì)有一個(gè)不好的點(diǎn),就是,如果樣式特別多, 就會(huì)有點(diǎn)麻煩,
4.2.4 動(dòng)態(tài)綁定style屬性的數(shù)據(jù)對(duì)象的用法
如何解決對(duì)象寫(xiě)法,當(dāng)屬性過(guò)多時(shí)的復(fù)雜問(wèn)題呢?
因?yàn)閯?dòng)態(tài)屬性style的值是一個(gè)對(duì)象,因此 我們可以把對(duì)象提取出來(lái)直接作為vue 數(shù)據(jù)data屬性值,那么我們就可以直接綁定一個(gè)對(duì)象就可以了
而且直接綁定一個(gè)對(duì)象,看起來(lái)更清晰
示例如下:
<div id="app">
<h2 :style="styleObject">Hello World</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
styleObject: {
color: "red",
fontSize: "30px"
}
}
})
</script>
如果我們想動(dòng)態(tài)修改樣式也可以如下處理
<div id="app">
<h2 :style="styleObject">Hello World</h2>
<button
@click="changColor"
>點(diǎn)擊切換顏色</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
styleObject: {
color: "red",
fontSize: "30px"
}
},
methods:{
changColor(){
this.styleObject.color = this.styleObject.color == "red"? "skyblue": "red"
}
}
})
</script>
4.3 數(shù)組語(yǔ)法
我們也可以擴(kuò)展對(duì)象的用法, 給動(dòng)態(tài)屬性的值綁定為數(shù)組, 數(shù)組中就可以使用多組樣式對(duì)象來(lái)綁定CSS樣式
<div id="app">
<h2
:style="[styleObject, baseStyle]"
>Hello World</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
styleObject: {
color: "red",
fontSize: "30px"
},
baseStyle: {
margin: 0,
padding: 0,
lineHeight: "50px"
}
}
})
</script>
這樣的寫(xiě)法,可以將樣式才分, 可以做到樣式復(fù)用,
