vue权威指南笔记01——样式的设置 

<!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>

 

posted @ 2019-01-04 20:20  桥南小院  阅读(230)  评论(0)    收藏  举报