国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js如何綁定class和style（內(nèi)聯(lián)樣式）

Chaz / 2075人閱讀

摘要：我們還可以綁定返回對象的計算屬性。用在組件上輸出這同樣適用于綁定輸出綁定內(nèi)聯(lián)樣式對象語法的對象語法十分直觀看著非常像，其實它是一個對象。

vue的class和style綁定 綁定html class 對象語法

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

上面的語法表示 class active 的更新將取決于數(shù)據(jù)屬性 isActive 是否為真值 。
我們也可以在對象中傳入更多的屬性來自由的切換class的值，不僅如此，v-bind還可以與普通的class共存。

我們還可以綁定返回對象的計算屬性。

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      "text-danger": this.error && this.error.type === "fatal",
    }
  }
}
數(shù)組語法

我們還可以把一個數(shù)組傳給v-bind:class

data:{
    active:"a",
    error:"b"
}

我們也可以在數(shù)組上使用三元運算符

data:{
    active:"a",
    error:"b",
    isActive:true
}

當我們更改isActive為false時

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

用在組件上 
Vue.component("mycom",{
    template:"
hi
"
})

輸出HTML

hi

這同樣適用于綁定HTML class

data:{
    isActive:true
}

輸出HTML

hi
綁定內(nèi)聯(lián)樣式（v-bind:style） 對象語法

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

data: {
    activeColor: "red",
    fontSize: 30
}

這樣我們感覺模板略顯繁瑣，所以我們可以直接綁定一個樣式對象，這樣模板會更加清晰

data:{
    styleobj:{
        color: "red",
        fontSize: "13px"
    }
}

同樣的，對象語法常常結(jié)合返回對象的計算屬性使用。

數(shù)組語法

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

我像風一樣自由
data:{
    baseStyles:{color:"red"},
    overridingStyles:{"font-size":"10px"}
}

自動添加前綴

因為各大瀏覽器的私有屬性不同，我們有時需要在樣式前添加前綴

例如-webkit-（谷歌）-ms-（微軟）-moz-（火狐）-o-（opera）

但是我們在vue中就無需添加，因為vue會為我們自動添加前綴

多重值

從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數(shù)組，常用于提供多個帶前綴的值，例如：

這會渲染數(shù)組中最后一個被瀏覽器支持的值。在這個例子中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么渲染結(jié)果會是 display: flex。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85131.html

相關(guān)文章

  • Vue.js-計算屬性和class與style綁定

    摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當?shù)谋磉_式過長或邏輯復雜時，還可以綁定一個計算屬性。 學習筆記：前端開發(fā)文檔 計算屬性 所有的計算屬性都以函數(shù)的形式寫在Vue實例中的computed選項內(nèi)，最終返回計算后的結(jié)果。 計算屬性的用法 在一個計算屬性中可以完成各種復雜的邏輯，包括運算、函數(shù)調(diào)用等，只要最終...

    Shihira 評論0 收藏0

  • Vue中 Class 與 Style 綁定

    摘要：與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。表達式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。綁定對象語法我們可以傳給一個對象，以動態(tài)地切換上面的語法表示的更新將取決于數(shù)據(jù)屬性是否為真值。 Class 與 Style 綁定 數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性 。因此，在 v-bind 用于 class 和 style 時，...

    lemanli 評論0 收藏0

  • 學習Vue.js-Day1

    摘要：學習內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學習內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻：官網(wǎng)： https://cn.vuejs.org...

    Cheriselalala 評論0 收藏0

  • 學習Vue.js-Day1

    摘要：學習內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學習內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻：官網(wǎng)： https://cn.vuejs.org...

    Cristic 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<