front page
The following code introduces the same vue method in html
code show as below
You can directly refer to html to see the effect as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
.active {
width: 56px;
height: 32px;
background-color: aquamarine;
}
.actived {
width: 56px;
height: 32px;
background-color: rgb(255, 127, 138);
}
</style>
</head>
<body>
<div id="app" class="container">
<div @click="get()" class="btn" :class="[type? 'active' : 'actived']">按钮1</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
type: true
},
methods: {
get() {
// 第一种
// this.type = false
// 第二种
this.type = !this.type
}
},
});
</script>
</body>
</html>
Picture below before clicking
Click as shown below
If you feel that the article is good, remember to pay attention, pay attention and collect it. Please correct me if there is any mistake. If you need to reprint, please indicate the source, thank you! ! !