Vue--绑定（v-bind）

绑定class

基本的样式

.notChange {
    width: 150px;
    height: 150px;
    margin: 20px;
    display: inline-block;
    background-color: red;
}
.classOne {
    color: aqua;
}
.classTwo {
    border-radius: 20px;
}
.classThree {
    font-size: 30px;
}
</style>

<div id="testBox">
    <!--字符串写法，适合类名不确定，比如随机改变样式-->
    <!--不改变的样式写死，改变的样式绑定，当点击的时候改变样式-->
    <div class="notChange" :class="diffClass" @click="changeClass">改变样式</div>
    <!--数组写法，适合个数不确定，类名也不确定的情况-->
    <div class="notChange" :class="classArr">多个class</div>
    <!--对象写法，适合个数类名确定，但是可以动态决定要不要用，（true，flase）-->
    <div class="notChange" :class="classObj">多个class</div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#testBox',
      data:{
        diffClass: 'classOne',  //首先指定初始样式
        classArr: ['classOne', 'classTwo', 'classThree'],
        classObj: {
            //要的样式为true，去掉的为flase
            'classOne': true,
            'classTwo': false,
            'classThree': true
        }
      },
      methods: {
        //改变样式的方法
        changeClass() {
            const arr = ['classOne', 'classTwo', 'classThree'];
            //随机取数组中的一个
            const num = Math.floor(Math.random() * 3);
            this.diffClass = arr[num];
        }  
      },
    })
</script>

也可以在:class里面直接写对象，但是一般不用，因为这样的话true和flase在vue-devtools难修改，调试比较麻烦，就算将true和false写成属性，放在data里面，也不知道对应关系。（如下图，没有能修改true和flase的）

<div class="notChange" :class="{classOne: true, classTwo: flase}">对象写法2</div>

tip：
点击小demo

<div id="testBox">
    <div class="notChange" :class="classObj" @click="oneFun">多个class</div>
</div>
<div class="notChange" :class="{classOne: isActive}" @click="clickObj">对象写法2</div>

new Vue({
  el:'#testBox',
  data: {
    isActive: true
  }
  methods: {
    clickObj() {
        this.isActive = ! this.isActive;
    },
    oneFun() {
        this.classObj.classOne = ! this.classObj.classOne;
    }  
  },
})

绑定style（事实上不常用）

基本样式

<style>
    .notChange {
        width: 150px;
        height: 150px;
        margin: 20px;
        display: inline-block;
        background-color: red;
    }
</style>

<div id="testBox">
    <!--对象语法，实际上就是用key-value-->
    <div class="notChange" :style="{fontSize: fSize+'px', color: 'blue'}">
        style's demo1
    </div>
    <div class="notChange" :style="styleObj">
        style's demo2
    </div>
    <!--数组语法，更少用-->
    <div class="notChange" :style="[styleObj, styleObj1]">
        style's demo3
    </div>
    <div class="notChange" :style="styleObj2">
        style's demo4
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#testBox',
      data:{
        fSize: 40,
        styleObj: {
            //一般来说样式对象中的属性是不能随便写的，比如这里是因为有font-size这个属性
            //一般是原来的去掉‘-’然后后面的首字母大写
            fontSize: '40px',
            color: 'blue'
        },
        styleObj1: {
            margin: '50px'
        },
        styleObj2: [
            {
                fontSize: '40px',
                color: 'blue'
            },
            {
                margin: '50px'
            },
        ]
      },
    })
</script>

由此可以看到，变化的样式对象属性放给Vue进行管理能实现动态变化。