以对象方式绑定style属性

 <div id="app">

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

        <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属性

<div id="app">

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