Vue.js學習筆記第二篇樣式綁定

本文轉載自查看原文 2017-12-18 14:57 1093 讀書筆記/ Vue/ JavaScript

Class綁定的對象語法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        .active {
            width: 64px;
            height: 64px;
            background: blue;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <div id="app-1">
        <div v-bind:class="{ active: isActive, textDanger: hasError }"></div>
    </div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#app-1',
            data: {
                isActive: true,
                hasError: false
            }
        })
    </script>
</body>
</html>

最基礎樣式綁定，是否使用樣式由后面的布爾值決定

也可以綁定一個對象，這樣看起來代碼更清爽一些

<div id="app-2">
    <div v-bind:class="classObject"></div>
</div>
<script type="text/javascript">
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            classObject: {
                active: true,
                'text-danger': true
            }
        }
    })
</script>

這兩段代碼中有個地方要特別注意一下，Bootstrap的text-danger屬性分別使用了textDanger（駝峰式）和text-danger（串聯式）的寫法，這2種寫法Vue都是支持的，唯一要注意的是使用串聯式要加單引號

例如：font-size屬性，在Vue里面可以寫成fontSize（駝峰式）或'font-size'（串聯式）

Class綁定的數組語法

<div id="app-3">
    <!-- 可以用三元表達式來選擇性的渲染 -->
    <div v-bind:class="[activeClass, hasError ? errorClass : '']"></div>
    <!-- 也可以在數組語法中使用對象語法 -->
    <div v-bind:class="[activeClass, { errorClass: hasError }]"></div>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            hasError: true,
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })
</script>

內聯綁定的對象語法

<div id="app-4">
    <div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px' }">雙子宮殿</div>
</div>
<script type="text/javascript">
    var vm4 = new Vue({
        el: '#app-4',
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })
</script>

同樣內聯綁定也可以綁定一個對象

<div id="app-5">
    <div v-bind:style="styleObject">Hello, TanSea!</div>
</div>
<script type="text/javascript">
    var vm5 = new Vue({
        el: '#app-5',
        data: {
            styleObject: {
                color: 'green',
                fontSize: '20px'
            }
        }
    })
</script>

內聯綁定的數組語法

<div id="app-6">
    <div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div>
</div>
<script type="text/javascript">
    var vm6 = new Vue({
        el: '#app-6',
        data: {
            baseStyles: {
                color: 'blue',
                fontSize: '30px'
            },
            overridingStyles: {
                fontFamily: '微軟雅黑'
            }
        }
    })
</script>

總體來說，樣式綁定相對來說是比較簡單的，只要記住語法格式就行了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue.js：樣式綁定 web前端——Vue.js基礎學習之class與樣式綁定 Vue.js學習筆記第七篇表單控件綁定小白初學Vue之綁定事件，屬性綁定、雙向綁定、v-if自學第二篇~ Vue.js 學習筆記 Vue.js 學習筆記一 Vue學習之路第二篇：插值表達式 mybatis第二篇—參數綁定 vue.js 樣式綁定 font-size 問題從零開始學習Vue.js，學習筆記