Vue.js 學習筆記 第4章 v-bind 及 class與style綁定

来源:https://www.cnblogs.com/geeksss/archive/2019/04/26/10776457.html
-Advertisement-
Play Games

DOM元素經常會動態地綁定一些class類名或style樣式,本章將介紹使用v-bind指令來綁定class和style的多種方法。 ...


 

本篇目錄:

4.1 瞭解v-bind指令

4.2 綁定class的幾種方式

4.3 綁定內聯樣式

 

DOM元素經常會動態地綁定一些class類名或style樣式,本章將介紹使用v-bind指令來綁定class和style的多種方法。

4.1 瞭解v-bind指令

在第2章時,我們已經介紹了指令v-bind的基本用法以及它的語法糖,它的主要用法是動態更新HTML元素上的屬性。
回顧一下下麵的示例:

 1 <div id="app">
 2     <a v-bind:href="url">超鏈接</a>
 3     <img v-bind:src="imgUrl">
 4     <!-- 縮寫為 -->
 5     <a :href="url">超鏈接</a>
 6     <img :src="imgUrl">
 7 </div>
 8 
 9 <script>
10     var app = new Vue({
11         el: "#app",
12         data: {
13             url: "https://www.geeksss.com",
14             imgUrl: "http://www.geeksss.com/logo.png"
15         }
16     });
17 </script>

 

鏈接的href屬性和圖片的src屬性都被動態設置了,當數據變化時,就會重新渲染。

在數據綁定中,最常見的兩個需求就是元素的樣式名稱class和內聯樣式style的動態綁定。
它們也是HTML的屬性,因此可以使用v-bind指令,我們只需要用v-bind計算出表達式最終的字元串就可以。
不過有時候表達式的邏輯較複雜,使用字元串拼接方法較難閱讀和維護,所以Vue.js增強了對classstyle的綁定。

4.2 綁定class的幾種方式

4.2.1 對象語法

v-bind:class設置一個對象,可以動態地切換class,例如:

 1 <div id="app">
 2     <div :class="{ 'active' : isActive }"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true
10         }
11     });
12 </script>

 

提示:
上面的:class等同於v-bind:class,是一個語法糖,如不特殊說明,後面都將使用語法糖寫法,可以回顧第2.3章節。

上面示例中,類名active依賴於數據isActive
當其為true時,<div>會擁有類名active,為false時則沒有。
所以上例最終渲染完的結果是:

1 <div id="app">
2     <div class="active"></div>
3 </div>

 

對象也可以傳入多個屬性,來動態切換class。
另外,:class可以與普通class共存,例如:

 1 <div id="app">
 2     <div class="static" :class="{'active':isActive, 'error':isError}"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             isError: false
11         }
12     });
13 </script>

 

:class內的表達式每項為真時,對應的類名就會載入,上面渲染後的結果為:

1 <div id="app">
2     <div class="static active"></div>
3 </div>

 

當數據isActiveisError變化時,對應的class類名也會更新。
比如當isErrortrue時,渲染後的結果為:

1 <div id="app">
2     <div class="static active error"></div>
3 </div>

 

:class的表達式過長或邏輯複雜時,還可以綁定一個計算屬性。
這是一種很友好和常見的用法,一般當條件多於兩個時,都可以使用datacomputed
例如使用計算屬性:

 1 <div id="app">
 2     <div :class="classes"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             error: null
11         },
12         computed: {
13             classes: function() {
14                 return {
15                     active: this.isActive && !this.error,
16                     "text-fail": this.error && this.error.type === "fail"
17                 };
18             }
19         }
20     });
21 </script>

 

除了計算屬性,你也可以直接綁定一個Object類型的數據,或者使用類似計算屬性的methods

4.2.2 數組語法

當需要應用多個class時,可以使用數組語法,給:class綁定一個數組,應用一個class列表:

 1 <div id="app">
 2     <div :class="[activeCls, errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             activeCls: "active",
10             errorCls: "error"
11         }
12     });
13 </script>

 

渲染後的結果為:

1 <div id="app">
2     <div class="active error"></div>
3 </div>

 

也可以使用三元表達式來根據條件切換class,例如下麵的示例:

 1 <div id="app">
 2     <div :class="[isActive ? activeCls : '', errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             activeCls: "active",
11             errorCls: "error"
12         }
13     });
14 </script>

 

樣式error會始終應用,當數據isActivetrue時,樣式active才會被應用。

class有多個條件時,這樣寫較為繁瑣,可以在數組中使用對象語法:

 1 <div id="app">
 2     <div :class="[{'isActive':isActive}, errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             errorCls: "error"
11         }
12     });
13 </script>

 

當然,與對象語法一樣,也可以使用datacomputedmethods三中方法。
以計算屬性為例:

 1 <div id="app">
 2     <button :class="classes">按鈕</button>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             size: "large",
10             disabled: true
11         },
12         computed: {
13             classes: function() {
14                 return [
15                     "btn",
16                     {
17                         ["btn-" + this.size]: this.size !== "",
18                         ["btn-disabled"]: this.disabled
19                     }
20                 ];
21             }
22         }
23     });
24 </script>

 

示例中的樣式btn會始終應用,當數據size不為空時,會應用樣式首碼btn-,後加size的值。
當數據disabledtrue時,會應用樣式btn-disabled
所以該示例最終渲染的結果為:

1 <div id="app">
2     <button class="btn btn-large btn-disabled">按鈕</button>
3 </div>

 

使用計算屬性給元素動態設置類名,在業務中經常用到,尤其是在寫復用組件的時候。
所以在開發過程中,如果表達式較長或邏輯複雜,應該儘可能地優先使用計算屬性。

4.2.3 在組件上使用

提示:
本節內容依賴第7章組件相關的內容,如果你尚未了結過Vue.js的組件,可以先跳過這節,稍後再閱讀。

如果直接在自定義組件上使用class:class,樣式規則會直接應用到這個組件的根元素上。
例如聲明一個簡單的組件:

1 Vue.component("my-component", {
2     template: "<p class='article'>一些文本</p>"
3 });

 

然後在調用這個組件時,應用上面兩節介紹的對象語法或數組語法給組件綁定class
以對象語法為例:

 1 <div id="app">
 2     <my-component :class="{'active':isActive}"></my-component>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true
10         }
11     });
12 </script>

 

最終組件渲染後的結果為:

1 <div id="app">
2     <p class="article active">一些文本</p>
3 </div>

 

這種用法僅適用於自定義組件的最外層是一個根元素,否則會無效。
當不滿足這種條件或需要給具體的子元素設置類名時,應當使用組件的props來傳遞。
這些用法同樣適用於下一節綁定內聯樣式style的內容。

4.3 綁定內聯樣式

使用v-bind:style(即:style)可以給元素綁定內聯樣式。
方法與:class類似,也有對象語法和數組語法,看起來很像直接在元素上寫CSS:

 1 <div id="app">
 2     <div :style="{ 'color':color, 'fontSize':fontSize+'px' }">文本</div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             color: "red",
10             fontSize: 14
11         }
12     });
13 </script>

 

CSS屬性名稱使用駝峰命名(camelCase)和短橫分隔命名(kebab-case)。
渲染後的結果為:

1 <div id="app">
2     <div style="color: red; font-size: 14px;">文本</div>
3 </div>

 

大多數情況下,直接寫一長串的樣式不便於閱讀和維護,所以一般寫在datacomputed里。
data為例改寫上面的示例:

 1 <div id="app">
 2     <div :style="styles">文本</div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             styles: {
10                 color: "red",
11                 fontSize: 14 + "px",
12             }
13         }
14     });
15 </script>

 

應用多個樣式對象時,可以使用數組語法:

1 <div :style="[styleA, styleB]">文本</div>

 

在實際業務中,:style的數組語法並不常用,因為往往可以寫在一個對象裡面,而較為常用的應當是計算屬性。

另外,使用:style時,Vue.js會自動給特殊的CSS屬性名增加首碼,比如transform


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、概述: AIDL是Android中IPC(Inter-Process Communication)方式中的一種,AIDL是Android Interface definition language的縮寫。 其主要作用是用於進程間額通訊。 在Android系統中,每個進程都運行在一塊獨立的記憶體中, ...
  • i500是一款強大而高效的AIoT平臺,專為攜帶型、家用或商用物聯網應用而設計,這些應用需要大量的邊緣處理、先進的多媒體功能、多台高解析度相機、相連的觸屏顯示器和多任務操作系統。 該平臺集成了Arm Cortex-A73 和 Cortex-A53 的四核集群,每個 CPU 都具備 NEON 引擎,集 ...
  • Hi3516EV300晶元特點: 處理器內核 ARM Cortex A7@ 900MHz,32KB I-Cache,32KB D-Cache /128KB L2 cache 支持 Neon 加速,集成 FPU 處理單元 視頻編碼 H.264 BP/MP/HP,支持 I/P 幀 H.265 Main ...
  • 版權聲明:本文為HaiyuKing原創文章,轉載請註明出處! 前言 這個方案只能在java中運行,無法在Android項目中運行。所以此方案是:APP將表單數據發送給後臺,後臺通過freemarker將表單數據根據模板ftl文件生成Word文件,然後返回給APP,由APP進行展現。 前期準備 1、下 ...
  • 本文同步自http://javaexception.com/archives/64 問題: 近期的需求中,碰到了一個view切換動畫的需求。要實現的是點擊按鈕,從左到右滑動view,左邊的view消失,右邊的view出現。有點像文字跑馬燈的效果,不過這次滾動的是view,具體看截圖效果。 實現思路: ...
  • web路徑問題相對路徑和絕對路徑,電腦相對路徑和絕對路徑。 ...
  • 1. Node.js是什麼? Node.js 誕生於 2009 年,由 Joyent 的員工 Ryan Dahl 開發而成, 目前官網最新版本已經更新到 12.0.0版本,最新穩定的是10.15.3。Node.js 不是一門語言也不是框架,它只是基於 Google V8 引擎的 JavaScript ...
  • [TOC] 1. CSS基本語法 CSS是層疊樣式表 1.1. CSS基本定義 CSS的定義方法時: 選擇器是將樣式和頁面元素關聯起來的名稱 屬性是希望設置的樣式屬性,每個屬性有一個或多個值 CSS引入頁面的方法 1. 在HTML中通過外聯方法 2. 內聯式,通過標簽的style屬性,直接在標簽上寫 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...