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

Paul_King 發(fā)布于2019-08-01 16:06 / 498人閱讀

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

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對(duì)應(yīng)的是data里的兩個(gè)json數(shù)據(jù)

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

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

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

相關(guān)文章

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

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

huaixiaoz 2019-08-21 11:16 評(píng)論0 收藏0
vue中class和style設(shè)置的相關(guān)方法

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

hearaway 2019-08-30 13:14 評(píng)論0 收藏0
react搭建后臺(tái)管理（react初窺）

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

wangjuntytl 2019-08-22 15:23 評(píng)論0 收藏0
Vue.js-計(jì)算屬性和class與style綁定

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

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

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

cartoon 2019-08-20 16:38 評(píng)論0 收藏0