方式一:属性绑定
1. 原始样式
<template>
<div id="app">
<h1>示例1 属性绑定</h1>
<div class="myStyle">测试</div>
</div>
</template>
<script>
export default {
name: "app",
};
</script>
<style>
.myStyle {
margin: 10px;
padding: 5px;
width: 200px;
height: 100px;
background: aquamarine;
border: 1 #000 solid;
}
</style>
2. 绑定按钮响应属性
(1)基础版
<div :class="{ myStyle: true }">测试</div>
通过改变boolean值,来动态绑定
(2)升级版
<div :class="{ myStyle: m_changeColor }">测试</div>