首页
下面代码在html引入的vue方法都一样
代码如下
直接引用html看效果即可如下:
<!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>
点击前如下图
点击后如下图
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！