vuejs添加class（使用vuejs）

本文目錄一覽：

• 1、vue.js綁定class 怎麼寫
• 2、vue.js怎麼實現單擊時添加class雙擊時取消class
• 3、如何用vue.js給點過的li添加單獨的class

vue.js綁定class 怎麼寫

綁定 HTML Class

對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class 。

div v-bind:class=”{ active: isActive }”/div

上面的語法表示 classactive 的更新將取決於數據屬性 isActive 是否為真值 。

我們也可以在對象中傳入更多屬性用來動態切換多個 class 。此外， v-bind:class 指令可以與普通的 class 屬性共存。如下模板:

div class=”static” v-bind:class=”{ active: isActive, ‘text-danger’: hasError }”/div

如下 data:

data: { isActive: true, hasError: false}

渲染為:

div class=”static active”/div

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true ， class列表將變為 “static active text-danger”。

你也可以直接綁定數據里的一個對象：

div v-bind:class=”classObject”/div

data: { classObject: { active: true, ‘text-danger’: false }}

渲染的結果和上面一樣。我們也可以在這裡綁定返回對象的計算屬性。這是一個常用且強大的模式：

div v-bind:class=”classObject”/div

data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive !this.error, ‘text-danger’: this.error this.error.type === ‘fatal’, } }}

數組語法

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

div v-bind:class=”[activeClass, errorClass]”

data: { activeClass: ‘active’, errorClass: ‘text-danger’}

渲染為:

div class=”active text-danger”/div

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

div v-bind:class=”[isActive ? activeClass : ”, errorClass]”

此例始終添加 errorClass ，但是只有在 isActive 是 true 時添加 activeClass 。

不過，當有多個條件 class 時這樣寫有些繁瑣。可以在數組語法中使用對象語法：

div v-bind:class=”[{ active: isActive }, errorClass]”

vue.js怎麼實現單擊時添加class雙擊時取消class

toggleClass方法可以實現對某一class進行添加、刪除操作。 示例： $(‘#test’).toggleClass(‘className’);上面的代碼將會依次為id為test的元素添加/刪除名為className的class，如果test元素存在className，則刪除className

如何用vue.js給點過的li添加單獨的class

一組li，這個li不是v-for出來的。是直接寫死的。為什麼不用v-for，li裡面的結構不一樣，

給所有的li添加點擊事件 tanchu（），給點擊的當前li添加一個class；

現在點擊之後所有的都會添加這個class；

Vue.js（讀音 /vjuː/, 類似於view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件