vue權威指南筆記01——樣式的設置

時間 2019-12-10

標籤 vue 權威指南筆記樣式設置简体版

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue自定義樣式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .classA {
            font-size: 16px;
            color: red;
        }
        
        .classB {
            font-size: 16px;
            color: green
        }
        
        .classC {
            font-size: 16px;
            color: blue;
        }
    </style>
</head>

<body>
    <div id="example">
<!--對象：無效例子
        <div v-bind:class=" {A}">
            1.對象:不可再設置對象
        </div>
        <div v-bind:class=" {classA : true}">
            2.對象：設置樣式名稱後，也不可直接設置true
        </div>
        <div v-bind:class=" {classA}">
            3.對象: 設置樣式名稱後，不設置也不會顯示
        </div>
 -->
         <div v-bind:class=" {classA : isShow}">
            1.對象：樣式名稱(classA)+是否顯示的對象(缺一不可)
         </div>
<!--數組無效
        <div :class="[classB]">
            1.數組:不可直接設置樣式名稱
        </div> 
        <div :class="[{C:true}]">
            2.數組：設置樣式的對象後，也不能夠直接設置true
        </div> 
-->
        <div :class="[B]">
            2.1.數組：直接對象賦值樣式的名字(classB)
        </div> 
        <div :class="[{classC: isShow}]">
            2.2.數組：包含一個對象(對象的用法)
        </div> 
<!--三元運算：內聯樣式的設置:能夠直接設置true-->
    <div  :style="{'color':isShow? '#000':'#fff'}">
        3.style內聯：JSX寫法
    </div>
    <div :class="true?A:null">
        4.class內聯：單純對象判斷
    </div>
    </div>
</body>

<script>
    var examleVM2 = new Vue({
        el: '#example',
        data: {
            A: 'classA',
            B: 'classB',
            C: 'classC',
            isShow: true,
            isHidden: false,
        }
    })
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。