Vue样式
绑定class样式
bind字符串形式
bind对象形式
arr数组形式
内联样式
styleObj对象
styleArr数组
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../lib/vue.js"></script>
<style>
.base {
color: mediumpurple;
}
.fz26 {
font-size: 26px;
}
.fz14 {
font-size: 14px;
}
.fw100 {
font-weight: 100;
}
.red {
color: red;
}
</style>
<body>
<div id="root">
<!-- Vue class样式 -->
<h1 class="base" :class="classStyle.classObj.class1">class样式-obj-字符串值形式</h1>
<h1 class="base" :class="classStyle.classObj2">class样式-obj-布尔值形式</h1>
<h1 class="base" :class="classStyle.classArr">class样式-Arr形式</h1>
<!-- Vue 内联样式 -->
<h1 class="base" :style="styleCss">内联样式</h1>
<h1 class="base" :style="styleCssArr">内联样式-arr形式</h1>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
classStyle: {
classObj: { class1: 'fz26', class2: 'fz14' },
classObj2: { fz26: true, fz15: false, red: true },
classArr: ['fz26', 'fw100'],
},
styleCss: {
fontSize: '40px',
color: 'green'
},
styleCssArr: [
{
fontSize: '40px',
color: 'green'
}
]
}
})
</script>
</body>
</html>