vue :class 動态綁定樣式_Vue之路 | 03插值操作與Vbind

點選左上方“ 熊吱 ”關注我們吧！

1 插值操作

1、Mustache

    Mustache是胡子，胡須的意思，在Vue中，通過Mustache文法(雙大括号)将data中的文本資料插入到HTML中。

    Mustache文法可以是簡單的語句，也可以是表達式，有很多種寫法。

<div id="app">      <h2>{{message}}h2>      <h2>{{message}},熊吱h2>      <h2>{{firstName + ' ' + lastName}}h2>      <h2>{{firstName}} {{lastName}}h2>      <h2>{{number * 2}}h2>    div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'hello',        firstName:'Bear',        lastName:'mouse',        number:100      }    })script>
           

2、v-once

使用場景：把原有資料展示出來，當資料改變時，展示的資料不跟着改變的情況。

<div id="app">      <h2>{{message}}h2>      <h2 v-once>{{message}}h2>    div>
           

    在頁面中，兩個message都會顯示"hello"，此時将app執行個體中的message資料内容改變，會發現頁面中包含v-once的資料并沒有跟着變化。

3、v-html

使用場景：從伺服器請求到的資料本身是一個HTML代碼，需要對HTML代碼進行解析，顯示相應的内容。

<div id="app">      <h2>{{url}}h2>      <h2 v-html='url'>h2>    div>    <script>    const app = new Vue({      el:'#app',      data:{        message:'hello',        url:'bilibili'      }    })script>
           

    在标簽中添加v-html後需要跟一個string類型，v-html會将string中的html格式解析并渲染到頁面中。

4、v-text

    與Mustache類似，直接将文本資料輸出到頁面上，因為不夠靈活，在開發中很少使用。

    <div id="app">      <h2>{{message}}h2>      <h2 v-text='message'>h2>    div>
           

5、v-pre

使用場景：希望可以直接顯示HTML中的内容，不進行解析。

<div id="app">      <h2>{{message}}h2>      <h2 v-pre>{{message}}h2>    div>
           

    顯示效果：

6、v-cloak

使用場景：有時候Vue解析出現卡頓時，頁面先出現未解析的模闆語句，造成十分不友好的頁面觀感，v-cloak用于隐藏未解析時出現的Mustache文法。

原理：Vue解析之前，div中會有一個屬性v-cloak；Vue解析之後，div中的v-cloak屬性就會删除。

    首先在style中定義：

<style>    /* 含有v-cloak屬性的内容隐藏 */    [v-cloak]{      display: none;    }style>
           

    在标簽中添加v-cloak屬性：

<div id="app">      <h2 v-cloak>{{message}}h2>    div>
           

2 V-bind

1、介紹

    前面說到的插值操作是動态對内容進行管理，有時候也需要對标簽的屬性(比如img元素的src指令)進行動态綁定，此時就會用到v-bind指令。

    v-bind用于綁定一個或多個屬性值，或者向另一個元件傳遞props值。

2、基礎使用

    在data中配置了圖檔或連結的url後，不能直接通過Mustache文法将值傳到src或href元素标簽中，此時在src或img前直接添加v-bind文法即可，示例代碼如下：

<div id="app">       <img v-bind:src='imgUrl'>img>       <h2><a v-bind:href="webUrl" target="_blank" rel="external nofollow" >百度一下a>h2>     div>     <script>     const app = new Vue({       el:'#app',       data:{         message:'hello',         imgUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=308218285,1903618240&fm=26&gp=0.jpg',         webUrl:'https://www.baidu.com'       }     })script>
           

    上面的代碼直接從百度複制了一張圖檔的連結，添加到data中的imgUrl中，html元素就能正常解析了。

3、文法糖

    v-bind對應的文法糖是一個冒号“：“，也就是v-bind的簡寫方式，在實際開發中，常常用的也是v-bind的文法糖，使代碼更加的簡潔。使用文法糖的v-bind代碼如下：

"app">

:src='imgUrl'>

:href="webUrl">

百度一下</a>2>

</div>

4、動态綁定class(對象文法)

    開發中常常會使用v-bind文法來動态綁定元素的class，可以直接在元素中直接添加v-bind:語句，再通過修改執行個體中的值來動态添加或去掉class，這種方法叫做動态綁定class的對象文法。

    代碼示例如下，首先需要在style中定義redcls類(顔色為紅色)與sizcls(字型大小為50px)的樣式。

    實作效果：

    點選按鈕時，添加了動态綁定的第二個hello元素的類會跟着改變，實作了class的響應式綁定。

注：當元素本身已經定義了一個class時，通過v-bind綁定的class布爾值為ture的時候也不會覆寫原有class，而是同時擁有2種或2種以上class。

    如果覺得對象文法直接放在html元素中長度太長了，可以使用在執行個體methods中添加傳回方法，并直接在html元素中調用：

class

="getclass()">{{message}}</h2>

    methods中添加方法代碼：

5、動态綁定class(資料文法)

    用于需要從伺服器動态擷取一些class類，通過數組的形式對元素進行class綁定，代碼示例如下：

6、動态綁定style(對象文法)

    動态綁定style多用于在某些時候需要直接改掉元素的CSS樣式，代碼示例如下：

7、動态綁定style(數組文法)

    綁定style同樣也可以使用數組，代碼示例如下：

ENDVue之路系列文章：Vue之路 | 01-Vue安裝與初體驗Vue之路 | 02-VSCODE添加Vue模闆

微信：熊吱

掃碼關注我們

網際網路知識交流平台

你的每個贊和在看，我都喜歡！