vue中class和style設置的相關方法

hearaway 發布于2019-08-30 13:14 / 2481人閱讀

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

class&style樣式設置 class

html代碼


    阿斯頓發

css代碼

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

js代碼

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

樣式生效的寫法

:class="[red, gray]" 調用的是vue參數里的data屬性

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

第二種方法也是可以調用vue參數了的data屬性的,記住，Vue里面一切皆是數據

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" //注意復合樣式的書寫規范
        }
    }
});

阿斯頓發

:style="[a, b]", a, b對應的是data里的兩個json數據

云服務器 GPU云服務器阿里云服務器的相關設置 JS中style屬性 js中改變style java中class類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115407.html

vue中class和style設置的相關方法

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

huaixiaoz 2019-08-21 11:16 評論0 收藏0
vue中class和style設置的相關方法

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

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

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

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

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

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

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

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