VUE: 绑定属性class，绑定style

vue基础：

 class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性！

了解绑定语法（非常简单上手）

<div v-bind:class=""></div>
可简写为：
<div :class=""></div>
style同上

绑定style属性：

1·在行内属性中书写样式

<div style="color: red; font-size:24px">我是div</div>

2·把属性值分为对象值

<div v-bind:style="{ color:'red', fontSize:'24px' } ">我是div</div>

3·

把对象值改成变量（代表样式color没有写死，而是根据变量color的值来，变量color是什么，样式color就是什么 ）

 <div v-bind:style="{ color:color, fontSize:fontSize} ">我是div</div>

完整展示如下；

<div id="app">

        <div style="color: red; font-size:24px">我是div</div>


        <div v-bind:style="{ color:'red', fontSize:'24px' } ">我是div</div>

        
        <div v-bind:style="{ color:color, fontSize:fontSize} ">我是div</div>

       

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

    <script>
        new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: '24px'
            }
        })
    </script>

注意咯：把样式属性改造成对象属性，要用大括号包裹起来；把样式转换成属性值，用引号引起来；把分号改成逗号；样式名转换成对象的属性名！

接下里是绑定class属性：

 

 <div id="app">
        <!-- 想要动态的设置class，也是给一个对象
        属性名：就是类名
        属性值是布朗值，如果给true，代表有这个类目；如果给false，代表没有这个类名 -->
        <div class="box" v-bind:class="{bg:true}">
        <!-- <div class="box" v-bind:class="{bg:isBg}"> -->
        </div>
        <button @click="btn">更改颜色</button>
    </div>

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

    <script>
        new Vue({
            el:'#app',
            data:{
                isBg:false
            },
            methods:{

            }
        })
    </script>