009、Class和Style绑定

把样式和class绑定在一起，有多重方法。使用v-bind绑定style和class时表达式可以是字符串、数组、对象。

使用场景

1、绑定内联样式：v-bind:style
2、动态绑定或者切换class：v-bind:class

具体使用方法

1、内联样式绑定：

a、对象方式
a1、
HTML:
<div v-bind:style="{ fontSize: fontSize + 'px' }"></div>
JS:
export default {
    ...
    data () { fontSize: fontSize }
}
a2、
HTML:
<div v-bind:style="styleObject"></div>
JS:
export default {
    ...
    data () {
        styleObject: {
            color: 'red',
            fontSize: '20px'
        }
    }
}

b、数组方式
HTML:
<div v-bind:style="[common,per]">22222</div>
JS:
export default {
    ...
    data () {
        common: {
            width: '100px',
            height: '60px',
            margin: '0 auto',
            background: 'blue'
        },
        per: {
            color: "red"
        }
    }
}

2、动态改变Class

a、对象方式
a1、
HTML:
/*
* active、static为class名称；
* isClick、default_为class显示的条件，值的改变也驱动着class名的改变
*/
<div v-on:click="changeStyle" v-bind:class="{active: isClick,static: default_}"></div>
JS: 
export default {
    ...
    data () {
        return {
            isClick: false,
            default_: true
        }
    },
    methods: {
        changeStyle: function () {
            this.isClick = !this.isClick;           
            this.default_ = !this.default_; 
        }
    }
}
CSS:
.active{
  border-bottom: 5px dashed red;
}
.static{
  border: none;
  background: #55666e;
}
a2、使用计算属性
HTML:
<div v-on:click="changeStyle" v-bind:class="classObj">33333</div>
JS:
export default {
    ...
    data: {
        isClick: false,
        err: null
    },
    computed:{
        classObj: function () {
            return {
                active: this.isClick && !this.err,
            }
        }
    }, 
}

b、数组方式
HTML:
<div v-on:click="changeStyle" v-bind:class="[{active: isClick},errClass]">66666</div>
JS:
data:{
    isClick: false,
    errClass:'errClass'// 值为class名
}

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。