您可将以下代码c,v到编辑器打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/* 对象语法 */
.active {
border: 2px solid pink;
width: 200px;
height: 200px;
}
.error {
background-color: aqua;
}
/* 数组语法 */
.active2 {
border: 2px solid rgb(47, 27, 223);
width: 200px;
height: 200px;
}
.error2 {
background-color: rgb(216, 29, 160);
}
/* 结合使用 */
.test {
color: #13e713;
}
</style>
</head>
<body>
<div id="app">
<!-- 对象语法active为类名,isActive控制是否显示 -->
<div :class="{active:isActive,error:isError}">对象语法</div>
<button @click="qiehuan">对象语法切换</button>
<hr>
<!-- 数组语法 -->
<div :class="[activeClass,errorClass]">数组语法</div>
<button @click="shuzu">数组语法切换</button>
<hr>
<!-- 结合使用a类名不会覆盖 -->
<div :class="[activeClass,errorClass,{test:isTest}]" class="a">结合使用</div>
<button @click="shuzu">结合使用</button>
<hr>
<!-- style内联样式 -->
<div :style="{border:a,width:b,height:c}">style内联样式</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
//对象语法可以简化为obj{ isActive: true, isError: true,}
isActive: true,
isError: true,
// 数组语法active2:类名,activeClass变量名,也可以简化为activeClass:['active2','error2']
activeClass: 'active2',
errorClass: 'error2',
// 结合使用
isTest: true,
// style内联样式
a: '1px solid blue',
b: '200px',
c: '200px'
},
methods: {
// 对象语法切换
qiehuan: function() {
this.isActive = !this.isActive;
},
// 数组语法的切换
shuzu: function() {
this.activeClass = '';
}
}
})
</script>
</body>
</html>
遇见即是缘分,不吝烦请赐教