VUE学习笔记005 动态绑定class v-bind:class{changeColor:true,changeLength:true}

style.css 内容

    .changeColor span{

    background: green;

}

.changeLength span:after{

    content: 'length';

    margin-left: 10px;

}

定义class的css是用点：“.”，如.footer/////////定义id的css是用井号“#”，如#footer

<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor1}">

    <span>Henry

</div>

#####################

new Vue({

el:"#vue-app",

    data:{

       changeColor1:false,

        changeLength1:false

    }

如果vue中的属性 changeColor1=true 则

 <div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor1}">

的结果为

 <div v-on:click="changeColor = !changeColor" v-bind:class="changeColor">

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

如果vue中的属性 changeColor1=false 则

 <div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor1}">

的结果为

 <div v-on:click="changeColor = !changeColor" v-bind:class=>