vue怎么綁定style樣式改變div寬度

可以這一寫，width是style的一個數(shù)據(jù)，js調(diào)用數(shù)據(jù)的方式就有 1、使用小數(shù)點的方式 2、使用中括號的方式 但是你的代碼調(diào)用時 200要帶單位 可以看到平時寫法width的數(shù)字后面是有單位的 所有在使用函數(shù)的時候也需要帶上哦 document.getElementById(

創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元玉環(huán)做網(wǎng)站,已為上家服務(wù),為玉環(huán)各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

如何在Vue中有條件地使用CSS類

a??v-bind:class="index==0?'current1':'current2'"?test/a

上面代碼 index請在data里面定義

05《Vue 入門教程》Vue 動態(tài)樣式綁定

本小節(jié)我們將介紹 Vue 中如何動態(tài)綁定樣式。包括 Class 的綁定、內(nèi)聯(lián)樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點難點。同學們可以在學完本小節(jié)之后對樣式的綁定方式加以總結(jié)，再通過反復的練習來加深印象。

通過 v-bind 指令給 DOM 元素動態(tài)綁定 Class 和 Style，一般用于根據(jù)不同數(shù)據(jù)狀態(tài)切換元素樣式的場景下。

我們可以通過數(shù)組和對象的兩種形式綁定元素的 Class。

通過傳給 v-bind:class 一個對象，以動態(tài)地切換 class：

代碼解釋： 上面的語法表示 show 這個 class 存在與否將取決于數(shù)據(jù)屬性 isShow 是否為真值。

具體示例：

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： HTML 代碼第 2 行，我們給 p 綁定樣式，當 isHide 為真值時， 其渲染結(jié)果為 ，否則 。 打開控制臺，修改 vm.isHide 的值可以動態(tài)改變頁面效果。

此外， v-bind:class 指令也可以與普通的 class 屬性共存。 語法：

當有如下模板:

和如下 data：

結(jié)果渲染為：

代碼解釋： 當 isShow 或者 hasError 變化時，class 列表將相應地更新。

例如，如果 hasError 的值為 true ， isShow 的值為 true ，class 列表將變?yōu)? "defaultClass show text-danger" 。

例如，如果 hasError 的值為 true ， isShow 的值為 false ，class 列表將變?yōu)? "defaultClass text-danger" 。

在之前介紹的案例中，我們將綁定的數(shù)據(jù)對象內(nèi)聯(lián)定義在模板里， 這樣顯得比較繁瑣。其實，我們可以統(tǒng)一定義在一個 classObject 中：

實例演示

"運行案例" 可查看在線運行效果

結(jié)果渲染為：

代碼解釋： HTML 代碼中，我們首先給 p 一個固定樣式 defaultClass， 然后通過 classObject 給 p 綁定樣式。 JS 代碼 第 6-9 行，我們定義了數(shù)據(jù) classObject，它有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁面渲染的效果是：

我們也可以在這里綁定一個返回對象的計算屬性。這是一個常用且強大的模式：

實例演示

"運行案例" 可查看在線運行效果

結(jié)果渲染為：

代碼解釋： HTML 代碼中，我們通過 classObject 給 p 綁定樣式。 JS 代碼 第 6-11 行，我們定義了計算屬性 classObject，它返回一個對象，該對象有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁面渲染的效果是：

我們可以把一個數(shù)組傳給 v-bind:class ，以應用一個 class 列表：

實例演示

運行案例點擊 "運行案例" 可查看在線運行效果

渲染為：

代碼解釋： 在 HTML 代碼中，我們通過數(shù)組給 p 綁定樣式，數(shù)組中有 classA 和 classB 兩個值。 在 JS 代碼第 6-7 行定義了 classA 和 classB 兩個字符串，它的格式和元素 class 的格式相同，不同的樣式類之間以空格相隔。

如果你也想根據(jù)條件切換列表中的 class，可以用三元表達式：

這樣寫將始終添加 classB 的樣式，但是只有在 isShow 為真時才添加 showClass 。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象的形式來表達數(shù)組中的某一項：

代碼解釋： 在 HTML 中，p 綁定一個樣式數(shù)組，數(shù)組第一項是一個對象表達式 { showClass: isShow }。當 isShow 為 true 時樣式最終綁定為： ；當 isShow 為 false 時樣式最終綁定為： ；

和 Class 的綁定一樣，Style 的綁定同樣可以通過數(shù)組和對象的兩種形式。

v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

實例演示

"運行案例" 可查看在線運行效果

渲染為：

代碼解釋： 在 HTML 代碼中，我們給 p 綁定 background-color 和 width 兩個內(nèi)聯(lián)樣式，它們的值在 data 中定義。

在模板中寫較為復雜的表達式語法顯得比較繁瑣，通常直接綁定到一個樣式對象更好，這會讓模板顯得更加清晰：

實例演示

"運行案例" 可查看在線運行效果

渲染為：

代碼解釋： 在 HTML 代碼中，我們給 p 綁定數(shù)據(jù) styleObject，它們的值在 data 中定義。

v-bind:style 的數(shù)組語法可以將多個樣式對象應用到同一個元素上：

實例演示

"運行案例" 可查看在線運行效果

渲染為：

本小節(jié)我們學習了如何通過 v-bind 來動態(tài)綁定樣式。主要有以下知識點：

vue.js怎么動態(tài)設(shè)置css

template

ul

li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}"

a :href="tab.href" @click="selectTab(tab)"{{tab.name}}/a

/li

/ul

script

selectTab(selectedTab) {

this.tabs.forEach(tab = {

tab.isSelected = (tab.name == selectedTab.name);

})

}

第六節(jié):Vue指令:v-bind動態(tài)屬性綁定

上一小節(jié)的學習,讓我們理解以v開頭的指令后面跟的將是表達式,同樣標簽也有一些合法的標簽屬性.如果想將這些屬性的值變?yōu)楸磉_式,我們可以使用Vue提供的v-bind:指令.

v-bind:指令會將普通屬性的值變?yōu)楸磉_值,比如

顯示結(jié)果

通過示例顯示的結(jié)果就了解

未使用 v-bind 指令的 class 屬性的值是一個字符串,表示給標簽添加一個 className 的類名

使用 v-bind 指令的 class 屬性值不在是字符串,而是表達式, 表達式里的 className 不是一個普通的字符,而是一個變量, Vue 實例 data 屬性中的數(shù)據(jù)

Vue 對于 v-bind 指令還提供了簡寫方式,如下

對于 v-bind 指令的認識和基本使用,我們已經(jīng)了解了,

那么接下來就看看 v-bind 使用過程中的一些問題和注意項

通過上面的學習,我們知道, v-bind 指令可以讓我們將屬性值關(guān)聯(lián)到Vue data 數(shù)據(jù)中,這樣的屬性,我們稱作為屬性的動態(tài)綁定

屬性的動態(tài)綁定比較符合vue以數(shù)據(jù)為驅(qū)動的模式,如果需要修改那個屬性值,就可以直接通過修改 Vue 數(shù)據(jù)即可,

例如,項目中的輪播就像輪播圖中的數(shù)據(jù), 在替換輪播數(shù)據(jù)的時候就會非常方便

來個例子: 動態(tài)改變顯示圖片

這個時候我們只需要改變數(shù)據(jù)里的src的值,圖片就會發(fā)生變化

注意:

動態(tài)屬性綁定, 在我們需要的時候在使用,如果一個屬性的是是固定的,

并不會在未來發(fā)生改變, 就沒有必要動態(tài)綁定屬性.

但在屬性動態(tài)綁定過程中有兩個屬性比較特殊, 這兩個屬性就是class 和style屬性,

在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組。

接下來好好研究研究

動態(tài)綁定class 就是使用v-bind指令來綁定, 一但使用v-bind指令后,class屬性的值不在是一個字符串,而是一個表達式,

比如未使用動態(tài)綁定示例:

未使用 v-bind 指令動態(tài)綁定屬性時, class的值就是字符串, 上例中h2有一個類名,類名是msg

使用了動態(tài)綁定示例:

如果使用動態(tài)綁定指令, 那么此時class后面的引號不在是字符串,而是一個 JavaScript 表達式, msg 也就成為了一個變量,因此此時h2標簽的類名不是字符串 msg , 而是數(shù)據(jù)中 msg 中的值

示例:

顯示結(jié)果

此時通過示例,我們就發(fā)現(xiàn)使用動態(tài)綁定class屬性的 div , class 屬性值被替換為了 Vue data 屬性中的數(shù)據(jù), 也就是說動態(tài)綁定 class 屬性的 msg 是一個變量

沒有使用動態(tài)綁定 class 屬性的值就是一個普通的字符串 msg

動態(tài)綁定class 和 沒有動態(tài)綁定的class可以同時使用, 不沖突,Vue會將動態(tài) class 屬性與普通 class 屬性在最后顯示是合并到一起

顯示結(jié)果:

通過示例結(jié)果發(fā)現(xiàn),這樣使用,h2將有兩個類名,一個是 wrap , 一個是 box ,

其中 wrap 是普通class屬性的值, box 是動態(tài)class屬性值 msg 變量在 Vue data 屬性中所表示的值

我們千萬不要在動態(tài)綁定 class 屬性中像以前利用空格一樣綁定多個類名

這樣的寫法就會報錯, 那么如何才能做到使用動態(tài)屬性綁定多個類名呢,

有的時候我們希望可以在一個DOM元素上動態(tài)綁定多個類名,

因為動態(tài)綁定的 class 值是表達式,我們就可以利用數(shù)組來羅列多個動態(tài)綁定的類名,

因此可以 v-bind:class 動態(tài)綁定 class 值中協(xié)商數(shù)組，使用數(shù)組來羅列多個綁定的 class 類名

示例入校:

這樣渲染出來的結(jié)果h2 標簽會同時擁有box 和wrap兩個類名

既然動態(tài)綁定class的值是表達式,那么我們就可以在表達式里,寫一些基本的表達式處理數(shù)據(jù),

通過邏輯的判斷來決定要不要給DOM元素添加這個類名

比如

示例結(jié)果:

通過實例,我們會發(fā)現(xiàn), 當 isTrue 的值為 true 時, h2 標簽有類名, 為 false 是,值為空字符串,無類名.

因此通過這個例子,我們就可以利用數(shù)據(jù)isTrue布爾值的判斷來切換類名,改變樣式

示例如下:

上面的實例, 在點擊是button按鈕時, 會切換 h2 標簽的類名,同時會改變 h2 的字體樣式.

注意:又到了教會你們,卻不推薦你們使用的時刻來了

你要問我為什么不推薦用?

那么我們不妨自己想一想,如果我一個標簽上有多個需要動態(tài)切換的類名怎么辦

我們是不是會想到如下的寫法:

如果你真的這么寫了, 你會發(fā)現(xiàn),后面動態(tài)綁定的class沒有任何效果, 所以這種寫法是有問題的

同時我們也會發(fā)現(xiàn)這種三目表達式切換類名也不是特別友好,

此時此刻,此情此景, 我們就不得不探討一下兩個問題?

喝口水,接著往下聊.

上回咱們聊到,如何解決如何更好的綁定多個類名的切換.

都已經(jīng)知道了動態(tài)綁定class的值是表達式, 所以我們可以將 v-bind:class 值 寫成一個對象，以動態(tài)地切換 class：

語法說明:

因為對象可以有多個屬性值對, 因此我們可以在對象中傳入更多屬性來動態(tài)切換多個 class。

寫法說明:

此時,我們就可以利用所學重新修改上面點擊改變樣式案例的寫法

這樣我們就可以做到兩個類名之間的切換, 如果希望有多個類名切換, 可以繼續(xù)給對象添加屬性

v-bind 動態(tài)綁定屬性除了 class 比較特殊外,還有一個 style 行內(nèi)樣式屬性也比較特殊

顯示結(jié)果:

需求分析：

先看看值為對象的用法

動態(tài)綁定style屬性說明:

如果使用動態(tài)綁定屬性style里的對象值不加引號, 就會有如下的問題:

例如

上面的這種寫法就會報錯, red 和 30px 會被當做變量去 Vue data 屬性中找對應的數(shù)據(jù), 但是找不到就報錯

正確的寫法應該是這樣的

也能正確顯示結(jié)果, 但是要注意字符串嵌套問題

相信通過剛才的例子,你也發(fā)現(xiàn)了,我們發(fā) font-size 的寫法改為了 fontSize .

因為CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case) 都可以：

因此,在普通的 style 屬性中一下兩種寫法都可以

但是一旦使用了動態(tài)綁定, style 屬性的值將變成JS表達式,

表達式里的大括號即為JS對象, 對象屬性的標識符是不支持 - 連字符的,

如果我們有兩種處理方案,

因此動態(tài)綁定需要如下寫法

推薦用駝峰寫法, 對象的值也可以是變量

動態(tài)屬性style的樣式值,CSS屬性中, color 是字符串 'red' 值, 字體大小 font-size 的值確實vue數(shù)據(jù)中 fontSize 的值,顯示結(jié)果沒有任何變化

這樣也會有一個不好的點,就是,如果樣式特別多, 就會有點麻煩,

如何解決對象寫法,當屬性過多時的復雜問題呢?

因為動態(tài)屬性style的值是一個對象,因此 我們可以把對象提取出來直接作為vue 數(shù)據(jù)data屬性值,那么我們就可以直接綁定一個對象就可以了

而且直接綁定一個對象,看起來更清晰

示例如下:

如果我們想動態(tài)修改樣式也可以如下處理

我們也可以擴展對象的用法, 給動態(tài)屬性的值綁定為數(shù)組, 數(shù)組中就可以使用多組樣式對象來綁定CSS樣式

這樣的寫法,可以將樣式才分, 可以做到樣式復用,

文章標題：vue如何綁定css樣式,vue 設(shè)置css
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article13/dsedjds.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)