学习日记--vue v-bine样式捆绑

v-bind:class

1.对象的捆绑方式

	<div id="demo">
        <span v-bind:class="{'class-a':isA ,'class-b':isB}">jijsdjifsj</span>
        <!-- 对象的捆绑方式（布尔值的捆绑方式） -->
        <!-- {'样式名'：'数据值'} -->
    </div>
    
    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                isA: true,
                isB: true
            }
        })
    </script>
    
    <style>
        .class-a {
            color: red
        }
    </style>

2.数组绑定写法

	<div id="demo">
        <span :class=[classA,classB]>测试文字</span>
        <!-- [classA,classB] 里面的值表示类名 -->
    </div>

    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                classA: "class-a",
                classB: "class-b"
            }
        })
    </script>

    <style>
        .class-a{
            color: blue
        }

        .class-b{
            font-size: 30px
        }
    </style>

3.字符串捆绑

	<div id="demo">
        <span :class="classA">测试方法</span>
        <!-- 字符串就是类的名字 -->
    </div>
    
    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                classA: "string"
            }
        })
    </script>

    <style>
        .string {
            color: red;
        }
    </style>

4.三元运算符

	<div id="demo">
        　　<p :class="isclass?classC:classD"></p>
            <!-- 三元判断 -->
    </div>
    
    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                isclass: true,
                classC: "C",
                classD: "D",
            }
        })
    </script>

5.混合写法

	<div id="demo">
        　　<span :class="[one,{'classA':classa,'classB':classb}]"></span>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                one: "string",
                classa: true,
                classb: false
            }
        })
    </script>

    <style>
        .string{
            font-family: 'Courier New', Courier, monospace;
        }
        .classa{
            color: blue
        }
    </style>

v-bind:style

v-bind:style 绑定只有两种方式

	<div id="demo">
	
        <p :style="{fontSize:font,color:red}">绑定style</p>
        <!-- {'类名':'样式数据'} -->

        <p :style="styleObject">用对象绑定style</p>
        <!-- 数值对象值 -->
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#demo",
            data: {
                font: "24px",
                red: "red",
                styleObject: {
                    fontSize: "30px",
                    color: "black"
                }
            }
        })
    </script>