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

. 簡介

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

2. 木子解釋

操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見需求。因?yàn)樗鼈兌际菍傩裕晕覀兛梢杂?v-bind 處理它們：只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可。不過，字符串拼接麻煩且易錯(cuò)。因此，在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組。 ---- 官方定義

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

2.綁定元素的 Class

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

2.1 對(duì)象

2.1.1 對(duì)象語法

通過傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：

<div v-bind:class="{ show: isShow }"></div>

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

具體示例：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .hide {
    display: none;
  }
</style>
<body>
  <div id="app"> 
    <div v-bind:class="{hide: isHide}">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    isHide: true
  },
})
//vm.isHide=true
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： HTML 代碼第 2 行，我們給 div 綁定樣式，當(dāng) isHide 為真值時(shí)，其渲染結(jié)果為 <div class="hide"></div>，否則 <div></div>。打開控制臺(tái)，修改 vm.isHide 的值可以動(dòng)態(tài)改變頁面效果。

2.1.2 與普通的 class 屬性共存

此外，v-bind:class 指令也可以與普通的 class 屬性共存。語法：<div class="defaultClass" v-bind:class="{ classA: isA,classB:isB }">

當(dāng)有如下模板:

<div
  class="defaultClass"
  v-bind:class="{ show: isShow, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isShow: true,
  hasError: false
}

結(jié)果渲染為：

<div class="defaultClass active"></div>

代碼解釋： 當(dāng) isShow 或者 hasError 變化時(shí)，class 列表將相應(yīng)地更新。

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

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

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

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div class="defaultClass" v-bind:class="classObject">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    classObject: {
      show: true,
      'text-danger': false
    }
  },
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

結(jié)果渲染為：

<div class="defaultClass show"></div>
代碼塊1

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

2.1.3 利用計(jì)算屬性綁定樣式

<div v-bind:class="classObject"></div>

我們也可以在這里綁定一個(gè)返回對(duì)象的計(jì)算屬性。這是一個(gè)常用且強(qiáng)大的模式：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:class="classObject"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  computed: {
    classObject: function () {
      return {
        show: true,
        'text-danger': false
      }
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

結(jié)果渲染為：

<div class="defaultClass show"></div>

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

2.2 數(shù)組語法

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

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:class="[classA, classB]">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    classA: 'classA',
    classB: 'classB1 classB2'
  },
})
</script>
</html>

運(yùn)行案例點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

渲染為：

<div class="classA classB1 classB2"></div>

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

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

<div v-bind:class="[isShow ? showClass : '', classB]"></div>

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

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

<div v-bind:class="[{ showClass: isShow }, classB]"></div>

代碼解釋： 在 HTML 中，div 綁定一個(gè)樣式數(shù)組，數(shù)組第一項(xiàng)是一個(gè)對(duì)象表達(dá)式 { showClass: isShow }。當(dāng) isShow 為 true 時(shí)樣式最終綁定為：<div v-bind:class="[showClass, classB]"></div>；當(dāng) isShow 為 false 時(shí)樣式最終綁定為：<div v-bind:class="[classB]"></div>；

3. 綁定內(nèi)聯(lián)樣式

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

3.1 對(duì)象語法

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

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="{ backgroundColor: backgroundColor, width: width + 'px' }"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    backgroundColor: 'red',
    width: 300
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

渲染為：

<div style=" background-color:red;width: 300px"></div>

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

在模板中寫較為復(fù)雜的表達(dá)式語法顯得比較繁瑣，通常直接綁定到一個(gè)樣式對(duì)象更好，這會(huì)讓模板顯得更加清晰：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="styleObject"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    styleObject: {
      "background-color": 'red',
      width: '300px'
    }
  },
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

渲染為：

<div style="background-color:red;width: 300px"></div>
代碼塊1

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

3.2 數(shù)組語法

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

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="[stylesA, stylesB]"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    stylesA: {
      "background-color": 'red',
      width: '300px'
    },
    stylesB: {
      color: '#fff',
      height: '300px'
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

渲染為：

<div style="background-color:red;width: 300px;color:#fff;height:300px"></div>

4. 小結(jié)

本小節(jié)我們學(xué)習(xí)了如何通過v-bind來動(dòng)態(tài)綁定樣式。主要有以下知識(shí)點(diǎn)：

通過 v-bind:class 動(dòng)態(tài)綁定元素的 Class；
v-bind:style 動(dòng)態(tài)綁定元素的內(nèi)聯(lián)樣式；
如果通過數(shù)組和對(duì)象的形式給 v-bind:class 和 v-bind:style 賦值。

本說明：

涉及到css樣式屬性的都采用，駝峰命名

什么是駝峰命名？就是你看到 “-” 就去掉，然后“-” 后面的字母大寫

例如：background-color 就寫成：backgroundColor對(duì)象方式

特點(diǎn)：首字母永遠(yuǎn)小寫；

方式1：style方式綁定（6中方法）

1、對(duì)象方式

例如： :style="{ backgroundColor: activeColor, fontSize: bitfontSize + 'px' }"

2、數(shù)組方式

例如：:style="[baseStyles, overridingStyles]"

3 簡單三目運(yùn)算
例如：:style="[{backgroundColor:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
4 多值兼容
例如： :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" 瀏覽器自己選擇
5 data對(duì)象綁定
例如：:style="styleObject" 其中styleObject在data中定義成一個(gè)對(duì)象
6 css變量方式(本質(zhì)還是對(duì)象方式)
例如：:style="{ --width: widthvalue}" 在css 中使用 width: var(--width);

方法2：class方式綁定

7 數(shù)組方式
例如： :class="[active: isActive ]" 這個(gè)是官方推薦，表示isActive==true 就加入active這個(gè)樣式
8 三目運(yùn)算（其實(shí)也是數(shù)組方式）
例如：:class="[activeStyle==index ? 'active':'']"

、實(shí)例與數(shù)據(jù)

Vue.js 應(yīng)用的創(chuàng)建很簡單，通過構(gòu)造函數(shù) Vue 就可以創(chuàng)建一個(gè) Vue 的根實(shí)例，并啟動(dòng) Vue 應(yīng)用：

var app=new Vue ({
 //選項(xiàng)
})

變量 app 就代表了這個(gè) Vue 實(shí)例。事實(shí)上，幾乎所有的代碼都是一個(gè)對(duì)象，寫入 Vue 實(shí)例的選項(xiàng)內(nèi)的。首先，必不可少的一個(gè)選項(xiàng)就是 el 。el 用于指定一個(gè)頁面已存在的 DOM 元素來掛載 Vue 實(shí)例，它可以是 HTMLElement ，也可以是 CSS 選擇器，比如：

<div id="app"></div>
var app=new Vue({
 el: document.getElementById('app') // 或者 el：'#app'
})

掛載成功后，可以通過 app.$el 來訪問該元素。Vue 提供了很多常用的實(shí)例屬性與方法，都以 $ 開頭，比如 $el 。

 <div id="app">
 <input type="text" v-model="name" placeholder="請(qǐng)輸入你的名字">
 <h1>Vue.js 最核心功能：數(shù)據(jù)的雙向綁定 —— {{ name }}</h1>
 </div>
 <script>
 var app=new Vue ({
 el: '#app',
 data: {
 name: ''
 }
 })
 </script>

上述代碼，在 input 標(biāo)簽上，有一個(gè) v-model 的指令，它的值對(duì)應(yīng)于創(chuàng)建的 Vue 實(shí)例的 data 選項(xiàng)中的 name 字段，這就是 Vue 的數(shù)據(jù)綁定。通過 Vue 實(shí)例的 data 選項(xiàng)，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。建議所有會(huì)用到的數(shù)據(jù)都預(yù)先在 data 內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護(hù)。

Vue 實(shí)例本身也代理了 data 對(duì)象里的所有屬性，故可以這樣訪問：

 var app=new Vue({
 el: "#app",
 data: {
 a: 1
 }
 })
 sonsole.log(app.a); //1

除了顯式地聲明數(shù)據(jù)外，也可以指向一個(gè)已有的變量，并且它們之間默認(rèn)建立了雙向綁定，當(dāng)修改其中任意一個(gè)時(shí)，另一個(gè)也會(huì)一起變化：

 var myData={
 a: 1
 }
 var app=new Vue({
 el: "#app",
 data: {
 a: myData
 }
 })
 sonsole.log(app.a); // 1
 // 修改屬性，原數(shù)據(jù)也會(huì)隨之修改
 app.a=2;
 console.log(myData.a); // 2
 // 反之，修改原數(shù)據(jù)，Vue 屬性也會(huì)修改
 myData.a=3;
 console.log(app.a); // 3

二、生命周期

每個(gè) Vue 實(shí)例創(chuàng)建時(shí)，都會(huì)經(jīng)歷一系列的初始化過程，同時(shí)也會(huì)調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這些鉤子，在合適的時(shí)機(jī)執(zhí)行我們的業(yè)務(wù)邏輯。如果你使用過 jQuery ,一定知道它的 ready() 方法，比如：

 $(document).ready(function() {
 // DOM 加載完后，會(huì)執(zhí)行這里的代碼
 });

Vue 的生命周期鉤子與之類似，比較常用的有：

created : 實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測(cè)等，但尚未掛載，$el 還不可用。需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用。
mounted : el 掛載到實(shí)例上后調(diào)用，一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開始。
beforeDestroy : 實(shí)例銷毀之前調(diào)用。主要解綁一些使用 addEventListener 監(jiān)聽的事件等。

這些鉤子與 el 和 data 類似，也是作為選項(xiàng)寫入 Vue 實(shí)例內(nèi)，并且鉤子的 this 指向的是調(diào)用它的 Vue 實(shí)例：

 var app - new Vue({
 el: '#app',
 data: {
 a: 2
 },
 created: function () {
 console.log(this.a); // 2
 }
 mounted: function () {
 console.log(this.$el); // <div id="app"></div>
 }
 })

三、插值與表達(dá)式

使用雙大括號(hào)（ Mustache 語法）“ {{ }} ” 是最基本的文本插值方法，它會(huì)自動(dòng)將我們雙向綁定的數(shù)據(jù)實(shí)時(shí)顯示出來，例如實(shí)時(shí)顯示當(dāng)前時(shí)間，每秒更新：

 <script>
 var app=new Vue ({
 el: '#app',
 data: {
 date: new Date()
 },
 mounted: function () {
 var _this=this; // 聲明一個(gè)變量指向 Vue 實(shí)例 this, 保證作用域一致
 this.timer=setInterval(function() {
 _this.date=new Date(); // 修改數(shù)據(jù) date
 }, 1000); // 1秒
 },
 beforeDestroy: function () {
 if (this.timer) {
 clearInterval(this.timer); // 在 Vue 實(shí)例銷毀前，清除我們的定時(shí)器
 }
 }
 })
 </script>

雙大括號(hào)里的內(nèi)容會(huì)被替換為 data 選項(xiàng)中 date 的值，通過任何方法修改數(shù)據(jù) data 選項(xiàng)中 date 的值，雙大括號(hào)的內(nèi)容都會(huì)被實(shí)時(shí)替換。這里的 {{ date }} 輸出的是瀏覽器默認(rèn)的時(shí)間格式，并非格式化的時(shí)間（ 2018-10-07 10:05:59 ），所以需要注意時(shí)區(qū)。有多種方法可以對(duì)時(shí)間格式化，比如賦值前先使用自定義的函數(shù)處理。當(dāng)然，Vue 的過濾器（ filter ）或計(jì)算屬性（ computed ）也可以實(shí)現(xiàn)。

如果有時(shí)候就是想輸出 HTML，而不是將數(shù)據(jù)解釋后的純文本，可以使用 v-html：

 <div id="app">
 <span v-html="link"></span>
 </div>
 <script>
 var app=new Vue({
 el: '#app',
 data: {
 link: '<a 
 }
 })
 </script>

link 的內(nèi)容將會(huì)被渲染為一個(gè)具有點(diǎn)擊功能的 a 標(biāo)簽，而不是純文本。但是要注意，如果將用戶產(chǎn)生的內(nèi)容使用 v-html 輸出后，有可能導(dǎo)致 XSS 攻擊（跨站腳本攻擊），所以要在服務(wù)端對(duì)用戶提交的內(nèi)容進(jìn)行處理，一般可將尖括號(hào) “<>” 轉(zhuǎn)義。

如果想顯示 {{ }}標(biāo)簽，而不進(jìn)行替換，使用 v-pre 即可跳過這個(gè)元素和它的子元素的編譯過程，例如：

<span v-pre>{{ 這里會(huì)顯示雙花括號(hào)，內(nèi)容不會(huì)被編譯 }}</span>

在 {{ }} 中，除了簡單的綁定屬性值外，還可以使用 JavaScript 表達(dá)式進(jìn)行簡單的運(yùn)算、三元運(yùn)算等，例如：

 <div id="app">
 {{ num / 100 }}
 {{ areYouOK ? '確定' : '取消' }}
 {{ text.split(',').reverse().join(',') }}
 </div>
 <script>
 var app=new Vue({
 el: '#app',
 data: {
 num: 100,
 areYouOK：false,
 text: '123,456'
 }
 })
 </script>

顯示結(jié)果依次為：1、取消、456,123 。

Vue.js 只支持單個(gè)表達(dá)式，不支持語句和流控制。另外，在表達(dá)式中，不能使用用戶自定義的全局變量，只能使用 Vue 白名單內(nèi)的全局變量，例如 Math 和 Date 。以下是一些無效的示例：

 <!-- 這是語句，不是表達(dá)式 -->
 {{ var text='123,456' }}
 <!-- 不能使用流控制，要使用三目運(yùn)算 -->
 {{ if (areYouOK) return msg }}

四、過濾器

Vue.js 支持在 {{ }} 插值的尾部添加一個(gè)管道符“ （ | ） ” 對(duì)數(shù)據(jù)進(jìn)行過濾，經(jīng)常用于格式化文本，比如字母全部大寫、貨幣千位使用逗號(hào)分隔等。過濾的規(guī)則是自定義的，通過給 Vue 實(shí)例添加選項(xiàng) filters 來設(shè)置，例如可以對(duì)時(shí)間進(jìn)行格式化處理，實(shí)時(shí)顯示當(dāng)前時(shí)間：

 <div id="app">
 {{ date | formatDate }}
 </div>
 <script>
 
 // 在月份、日期、小時(shí)等小于 10 時(shí)前面補(bǔ) 0
 var padDate=function(value) {
 return value < 10 ? '0' + value : value;
 };
 var app=new Vue({
 el: "#app",
 data: {
 date: new Date()
 },
 filters: {
 formatDate: function (value) { // 這里的 value 就是需要過濾的數(shù)據(jù)
 var date=new Date(value);
 var yaer=date.getFullYear();
 var month=padDate(date.getMonth() + 1);
 var day=padDate(date.getDate());
 var hours=padDate(date.getHours());
 var minutes=padDate(date.getMinutes());
 var seconds=padDate(date.getSeconds());
 // 整理返回格式化后的日期
 return yaer + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
 }
 },
 mounted: function () {
 var _this=this; // 聲明一個(gè)變量指向 Vue 實(shí)例 this , 保證作用域一致
 this.timer=setInterval({
 _this.date=new Date(); // 修改數(shù)據(jù) date
 }, 1000);
 },
 beforeDestroy: function() {
 if (this.timer) {
 clearInterval(this.timer); // 在 Vue 實(shí)例銷毀前，清除我們的定時(shí)器
 }
 }
 })
 </script>

過濾器也可以串聯(lián)，而且可以接收參數(shù)，例如：

 <!-- 串聯(lián) -->
 {{ message | filterA | filterB }}
 <!-- 接收參數(shù) -->
 {{ message | filterA('arg1', 'arg2') }}

過濾器應(yīng)當(dāng)用于處理簡單的文本轉(zhuǎn)換，如果要實(shí)現(xiàn)更為復(fù)雜的數(shù)據(jù)變換，應(yīng)該使用計(jì)算屬性。

在線咨詢

上一篇：CSS-重繪回流(Reflow &
下一篇：深入分析 Java Web 中的中文編碼問題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

. 簡介

2. 木子解釋

2.綁定元素的 Class

2.1 對(duì)象

2.1.1 對(duì)象語法

2.1.2 與普通的 class 屬性共存

2.1.3 利用計(jì)算屬性綁定樣式

2.2 數(shù)組語法

3. 綁定內(nèi)聯(lián)樣式

3.1 對(duì)象語法

3.2 數(shù)組語法

4. 小結(jié)

方式1：style方式綁定（6中方法）

方法2：class方式綁定

二、生命周期

三、插值與表達(dá)式

四、過濾器

您的項(xiàng)目需求