vue学习(绑定class、v-bind:style(对象语法、数组语法))

文章目录

• vue 属性绑定
• • css
  • 1 class绑定
  • • 1.1 字符串绑定
    • 1.2 对象绑定 和 数组绑定
  • 2 style 绑定

vue 属性绑定

css

    .class0{
        color: red;
        font-size: 10px;
    }

    .class00{
        color: blue;
        font-size: 70px;
    }

    .class2{
        color: yellow;
        font-size: 30px;
    }

    .class3{
        color: indianred;

    }

    .class4{
        font-size: 30px;
    }

1 class绑定

1.1 字符串绑定

<div id="app1">
    可以绑定一个默认class 字符串绑定class
    <p class="class0" :class="a"> xxxx是字符串 </p>

    <button @click="updates1"> 点击</button>
</div>

   // 1.1 字符串绑定
    var a = new Vue({
        el:'#app1',
        data: {
            //绑定默认css属性
            a: "class1",
            b:"class0",

        },
            //动态切换css属性
            methods:  {
                updates1 (){
                    this.a = 'class2'

                }
            }



    });

1.2 对象绑定 和 数组绑定

<div id="app2">
    对象绑定class
    <p :class="{class2:isA,class00:isB}"> xxxx是对象 例如 :class="{class2:isA,class00:isB}"</p>

    <button @click="updates2"> 点击</button> <br>

    数组绑定class <br>
    <p :class="['class3','class4']"> xxxx是数组  例如 :class="[class3,class4]" </p>


</div>

    //1.2 对象绑定
    var a = new Vue({
        el:'#app2',


        data: {
            //绑定默认css属性
            isA: true,
            isB: false,
        },
        //动态切换css属性
        methods:  {
            updates2 (){
                this.isA = false;
                this.isB = true;
            }
        }


    });

图示

点击后

2 style 绑定

<div id="app3">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 绑定1 例如  :style="{ color: activeColor, fontSize: fontSize + 'px' }"</div>
    <div :style="objectCssStyle">Style 绑定2(绑定到一个样式对象通常更好)  例如  :style="objectCssStyle"</div>
    <div :style="[clSty1, clSty2]">Style 绑定3(数组语法)  例如   :style="[activeColor, fontSize]"</div>

    <button @click="updates4"> 点击</button>
</div>

    // 2 style  绑定
    var a = new Vue({
        el:'#app3',
        data: {
            //绑定默认css属性
            activeColor: 'red',
            fontSize: 100,
            objectCssStyle:{
                color: 'red',
                fontSize: '10px'
            },
            objectCssStyle2:{
                color: 'yellow'
            },

            clSty1: {
                color: 'green',
                fontSize: '30px'
            },
            clSty2: {
                'font-weight': 'bold'
            }


        },
        //动态切换css属性
        methods:  {
            updates4 (){
                this.activeColor = "blue";
                this.fontSize = 20;
                this.objectCssStyle = this.objectCssStyle2

            }
        }

    });

图示

点击后