vue中class和style設(shè)置的相關(guān)方法

huaixiaoz 發(fā)布于2019-08-21 11:16 / 1197人閱讀

摘要：樣式設(shè)置代碼阿斯頓發(fā)代碼代碼樣式生效的寫法調(diào)用的是參數(shù)里的屬性第二種方法也是可以調(diào)用參數(shù)了的屬性的記住，里面一切皆是數(shù)據(jù)第二種方法的精簡版，官方版本和基本相同注意復(fù)合樣式的書寫規(guī)范阿斯頓發(fā)對應(yīng)的是里的兩個數(shù)據(jù)

class&style樣式設(shè)置 class

html代碼


    阿斯頓發(fā)

css代碼

.red {
    color: red;
}
.gray {
    background-color: gray;
}

js代碼

window.onload = function() {
    new Vue({
        el: "#box",
        data: {
            red: "red",
            gray: "gray"
        }
    });
}

樣式生效的寫法

:class="[red, gray]" 調(diào)用的是vue參數(shù)里的data屬性

:class="{red: true, gray: true}"

第二種方法也是可以調(diào)用vue參數(shù)了的data屬性的,記住，Vue里面一切皆是數(shù)據(jù)

new Vue({
    el: "#box",
    data: {
       red: "red",
       gray: "gray",
       a: true,
       b: false
 }   
});

:class="json",第二種方法的精簡版，官方版本

new Vue({
    el: "#box",
    data: {
        red: "red",
        gray: "gray",
        json: {
            a: true,
            b: false
        }
    }
});

style

和class基本相同

:style="{}"

:style="a"

new Vue({
    el: "#box",
    data: {
        red: "red",
        gray: "gray",
        a: {
            color: "red",
            backgroundColor: "gray" //注意復(fù)合樣式的書寫規(guī)范
        }
    }
});

阿斯頓發(fā)

:style="[a, b]", a, b對應(yīng)的是data里的兩個json數(shù)據(jù)

云服務(wù)器 GPU云服務(wù)器阿里云服務(wù)器的相關(guān)設(shè)置 JS中style屬性 js中改變style java中class類

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86487.html

相關(guān)文章

vue中class和style設(shè)置的相關(guān)方法

摘要：樣式設(shè)置代碼阿斯頓發(fā)代碼代碼樣式生效的寫法調(diào)用的是參數(shù)里的屬性第二種方法也是可以調(diào)用參數(shù)了的屬性的記住，里面一切皆是數(shù)據(jù)第二種方法的精簡版，官方版本和基本相同注意復(fù)合樣式的書寫規(guī)范阿斯頓發(fā)對應(yīng)的是里的兩個數(shù)據(jù) class&style樣式設(shè)置 class html代碼阿斯頓發(fā) css代碼 .red { color: red; } .gray { backgr...

hearaway 2019-08-30 13:14 評論0 收藏0
vue中class和style設(shè)置的相關(guān)方法

摘要：樣式設(shè)置代碼阿斯頓發(fā)代碼代碼樣式生效的寫法調(diào)用的是參數(shù)里的屬性第二種方法也是可以調(diào)用參數(shù)了的屬性的記住，里面一切皆是數(shù)據(jù)第二種方法的精簡版，官方版本和基本相同注意復(fù)合樣式的書寫規(guī)范阿斯頓發(fā)對應(yīng)的是里的兩個數(shù)據(jù) class&style樣式設(shè)置 class html代碼阿斯頓發(fā) css代碼 .red { color: red; } .gray { backgr...

Paul_King 2019-08-01 16:06 評論0 收藏0
react搭建后臺管理（react初窺）

摘要：前言以前一直是用進(jìn)行的開發(fā)于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設(shè)置的版本。前言以前一直是用vue進(jìn)行的開發(fā), 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了本來是想寫一個類似 Vue仿今日頭條那樣...

wangjuntytl 2019-08-22 15:23 評論0 收藏0
Vue.js-計算屬性和class與style綁定

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

Shihira 2019-08-23 16:02 評論0 收藏0
從0到1搭建webpack2+vue2自定義模板詳細(xì)教程

摘要：安裝安裝完成之后，你應(yīng)該可以使用了，方式如下上述命令應(yīng)該自動在瀏覽器中打開。前言 webpack2和vue2已經(jīng)不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內(nèi)容寫的不是很詳細(xì)，對于很多個性化配置還是需要自己過一遍文檔。Vue官方提供了多個vue-templates，基于vue-cli用官方的webpack模板居多，不過對于很多人來說，官方的webpack模板的配...

cartoon 2019-08-20 16:38 評論0 收藏0