vue（绑定style属性）

以对象方式绑定style属性

    <!-- 在行内属性中书写样式 -->

    <div style="color:royalblue ; font-size: 48px;">黄绥睿真帅个鬼</div>



    <!-- 把行内属性改造成对象，以对象方式绑定style属性

    外部增加{}；属性值改造成字符串；分高改成逗号；属性名到对象名的改变 -->

    <div v-bind:style="{color:'red',fontSize:'48px'}">小钟不要脸</div>

           <!-- 把属性值改成变量 -->

           <!-- 第一个color是样式名，第二个color是变量名，和data中的变量保持一致 -->

    <div v-bind:style="{color:color,fontSize:size}">小邹也没用</div>

<script src="../vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            color:'red',

           size:'24px'

       

       

        }

    })

</script>

以对象方式绑定class属性

    <button @click="btn">这里</button>

    <!-- 想要动态的设置class，也是给一个对象 -->

    <!-- 属性值：就是类名 -->

    <!-- 属性值：就是布尔值，如果为true，就代表有这个类名：false代表没有 -->

    <!-- <div class="box" v-bind:class="{bg:ture}"></div> -->

    <!-- 把布尔值转换成变量名，在data中去阐明这个变量 -->

    <div class="box" v-bind:class="{bg:isBg}"></div>

</div>

<script src="../vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            isBg:true,

            flag:0

        },

        methods:{

            btn(){

                if(this.flag==0){

                    this.isBg=true

                    this.flag=1;

                }

                else{

                    this .isBg=false;

                    this.flag=0;

                }

            }

        }

    })

</script>