<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
color: rebeccapurple;
}
.box_width {
width: 400px;
height: 400px;
background-color: red;
border: 1px solid green;
}
.uli {
display: flex;
list-style: none;
}
.uli li {
margin: 15px;
}
.uli li:hover {
cursor: pointer;
}
.back {
color: red;
background-color: royalblue;
}
.backfalse {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="app">
<div :class="bindClass">{{msg}}</div>
<button @click="btn('add')">增加样式</button>
<button @click="btn('cutback')">减少样式</button>
<ul class="uli">
<li v-for="(item,index) in arrs" :key="index" @click="ulBtn(index)"
:class="[index==isBack?'back':'backfalse']">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "测试",
bindClass: "",
arrs: ["便签一", "便签二", "便签三"],
isBack: 0,
},
methods: {
btn(data) {
if (data == "add") {
this.bindClass = "box box_width";
} else {
this.bindClass = "";
}
},
ulBtn(e) {
this.isBack = e
},
},
});
</script>
</body>
</html>
