<style>
.review {
background-color: orange;
border: 2px solid yellowgreen;
}
.classA {
background-color: orange;
border-radius: 10px;
}
.isSelect {
background-color: pink;
color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<h1 style="color: red" class="review">复习原始样式</h1>
<hr />
<h1>class绑定样式</h1>
<p :class="one">第一种方式:直接绑定变量</p>
<!--对象 key是 类名 value是布尔值 true代表生效 false 不生效 -->
<p :class=" {classA:true, review:isActive} ">第二种方式:对象的形式</p>
<!-- 常用于 选中态 -->
<p :class=" isActive ? 'isSelect' : '' ">第三种: 三元运算符</p>
<!-- 数组 绑定 多个类名 -->
<p :class=" [one,'review'] ">第四种:数组</p>
<hr />
<h1>style 行内式</h1>
<p :style=" {color:'red',background:bg0} ">第一种:对象的形式</p>
<p :style=" styleObj ">第二种形式:对象变量</p>
</div>
<script>
let { createApp } = Vue;
const app = createApp({
data() {
return {
title: "样式绑定",
one: "classA",
isActive: true,
bg0: "orange",
styleObj: {
border: "1px solid red",
color: "white",
background: "yellowgreen",
},
};
},
}).mount("#app");
</script>
</body>