Vue 教程第三篇—— 綁定 class

綁定 class

對象語法

v-bind:class="{樣式名: 結果爲 boolean 的表達式}"，表達式結果爲 true，則元素 class="樣式名"，不然元素 class=""

<div :class="{classNam1: 1 == 1, className2: 1 == 2}"></div>

渲染結果

<div class="classNam1"></div>

也能夠寫成

<div :class="classObject"></div>

data: {
        classObject: {
            className1: false,
            className2: true
        }
    }

渲染結果

<div class="className2"></div>

還能夠經過計算屬性的方式

<div :class="classObjectComputed"></div>

computed: {
        classObjectComputed: function(){
            return{
                className1: true,
                className2: true
            }
        }
    }

渲染結果

<div class="className1 className2"></div>

數組語法

v-bind:class="[]"，數組元素能夠爲表達式，也能夠爲字符串，若是是字符串則直接輸出爲樣式名

<div :class="[class1, class2, 'className3', active ? 'className4' : '']"></div>

data: {
        class1: 'className1',
        class2: 'className2',
        active: true
    }

渲染結果

<div class="className1 className2 className3 className4"></div>

也能夠用數據對象的方式，解析的邏輯和對象語法同樣

<div :class="[{className1: 1 == 1, className2: 1 == 2}, 'className3' ]"></div>

渲染結果

<div class="className1 className3"></div>

綁定 style

對象語法

在對象當中，CSS 的屬性名要用駝峯式表達：fontSize 解析成 font-size

<div :style="{color: color, fontSize: fontSize, backgroundColor: '#ccc'}"></div>

data: {
        color: 'red',
        fontSize: '12px'
    }

渲染結果

<div style="color: red, font-size: 12px; background-color: #ccc"></div>

數組語法

<div :style="[styleObject, {backgroundColor: '#ccc'}]"></div>

data: {
        styleObject: {
            color: 'red',
            fontSize: '12px'
        }
    }

渲染結果

<div style="color: red, font-size: 12px; background-color: #ccc"></div>

css做用域——scoped

<style scoped>
    @media (min-width: 250px) {
        .list-container:hover {
            background: orange;
        }
    }
</style>

<style src="../css/index.css" scoped></style>