屬性系結

使用v-bind指令

<div>
    <a v-bind:href="url">百度</a>
</div>

v-bind縮寫形式

<div>
    <a :href="url">百度</a>
</div>

樣式系結

class系結

class系結物件用法

<div v-bind:class="{style1: active, style2: active1}">
    測驗樣式
</div>

var vm = new Vue({
    el: '#app',
    data: {
        active: true,
        active1: true
    }
});

style1和style2屬性為class名，active為屬性的值，可以取true or false，當active的值

為true時，對應class為激活狀態

class系結陣列用法

<div v-bind:class="[s1, s2]">
    測驗樣式
</div>

var vm = new Vue({
    el: '#app',
    data: {
        s1: 'style1',
        s2: 'style2'
    }
});

s1和s2是data里的屬性，它們可以被賦值為某個class

物件系結和陣列系結結合使用

<div v-bind:class="[s1, s2, {test: isTest}]">
    測驗樣式
</div>

var vm = new Vue({
    el: '#app',
    data: {
        s1: 'style1',
        s2: 'style2',
        isTest: true
    }
});

class系結值簡化操作

<div v-bind:class="arrClasses">
    測驗樣式
</div>
<div v-bind:class="objClasses">
    測驗樣式
</div>

var vm = new Vue({
    el: '#app',
    data: {
        arrClasses: ['style1', 'style2'],
        objClasses: {
            style1: true,
            style2: true
        }
    }
});

當標簽有默認的class時如何保留

<div class="test" v-bind:class="objClasses">
    測驗樣式
</div>

style系結

style系結物件用法

<div id="app">
    <!-- 物件形式 -->
    <div v-bind:style="{width: widthStyle, height: heightStyle, border: borderStyle}"></div>
    <!-- 物件簡寫形式 -->
    <div v-bind:style="objStyle"></div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        widthStyle: '100px',
        heightStyle: '100px',
        borderStyle: '1px solid red',
        objStyle: {
            width: '100px',
            height: '100px',
            border: '1px solid red'
        }
    }
});

style系結陣列用法

<div id="app">
    <!-- 陣列形式 -->
    <div v-bind:style="[baseStyle, overrideStyle]"></div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        baseStyle: {
            width: '100px',
            height: '100px',
            border: '1px solid red'
        },
        overrideStyle: {
            border: '1px solid red',
            backgroundColor: 'skyblue'
        }
    }
});

當陣列里有多個物件時，不同物件里相同的屬性會被覆寫，不存在的屬性則添加

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259254.html

標籤：其他

上一篇：每天學一個jquery插件-做圖片書簽

下一篇：基于HTML/CSS/JS的愛吹風的獅子小游戲

Vue框架——屬性系結和樣式系結

屬性系結和樣式系結