style和class

class

1.数组类型

代码展示

# css代码
    .red {
        background-color: red;
    }
    .color01 {
        color: white;
    }
# html代码
    <div :class="arrClass">
         class使用
    </div>

# javsScript代码
    data: {
        arrClass: ['red', 'color01']
    },

浏览器展示

style

在组件中的 style 上加 scoped 样式只对当前组件有效， 防止样式污染别的组件

<style scoped>
</style>

1.对象类型

代码展示

# html代码
    <div :style="objStyle">
         style样式使用
    </div>

# javsScript代码
    data: {
         objStyle: {
             # 动态绑定 对象类型的数据
             'color': 'red', 'fontSize': '30px', 'backgroundColor': 'skyblue'
         }
    },

浏览器展示