Style与Class的绑定

在工作常常遇到动态class绑定，如果不用Vue可能要字符串拼接，但是vue给了比较好的解决方法：直接上代码，一下基本包含了所有用到的情况

<div id="app">
    <div :class="['active', 'normal']">数组绑定多个class</div>
    <div :class="[{'active':isActive},'normal']">数组包含对象绑定class</div>
    <div :class="[showWarning(), 'normal']">数组包含方法绑定class</div>
    <div :style="[warning,bold]">数组绑定多个style</div>
    <div :style="[warning,mix()]">数组包含方法绑定多个style</div>
    <div :style="{display:['-webkit-box','-ms-flexbox','flex']}">style多重值从后到前取值</div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                isActive: true,
                warning: {
                    color: 'orange'
                },
                bold: {
                    fontWeight: 600
                }
            }
        },
        methods: {
            showWarning() {
                return 'warning'
            },
            mix() {
                return { ...this.bold, fontSize: '20px' }
            }
        }
    })
</script>

话不多说自己试验