完整代码
注意：加载<script src="js/vue/vue.js"></script>中vue.js的位置
<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>选择项卡切换代码</title>
<script src="js/vue/vue.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#card_list {
position: relative;
background-color: black;
height: 200px; /*为防止塌陷，父div必须设置固定高度*/
}
.card_list_1 {
height: 200px;
width: 100%;
background-color: rgb(255, 211, 211);
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}
.card_list_2 {
height: 200px;
width: 100%;
background-color: rgb(152, 179, 253);
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}
.card_list_3 {
height: 200px;
width: 100%;
background-color: rgb(157, 242, 171);
text-align: center;
line-height: 200px;
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<div id="app">
<div class="card_button">
<button @click="card_click(0)" :style="{color:m_color[0]}">卡片1</button>
<button @click="card_click(1)" :style="{color:m_color[1]}">卡片2</button>
<button @click="card_click(2)" :style="{color:m_color[2]}">卡片3</button>
</div>
<div id="card_list">
<div v-show="card_list[0]==1" class="card_list_1">
卡片1
</div>
<div v-show="card_list[1]==1" class="card_list_2">
卡片2
</div>
<div v-show="card_list[2]==1" class="card_list_3">
卡片3
</div>
</div>
<div>1</div>
<div>2</div>
</div>
</body>
<!-- 选中效果 -->
<script>
var app = new Vue({
el: "#app",
data: {
m_color: ["red", "black", "blacks"],
card_list: ["1", "1", "1"],
},
methods: {
card_click(a) {
// 点击效果
Vue.set(this.m_color, 0, "black");
Vue.set(this.m_color, 1, "black");
Vue.set(this.m_color, 2, "black");
Vue.set(this.m_color, a, "red");
// 卡片切换
Vue.set(this.card_list, 0, "0");
Vue.set(this.card_list, 1, "0");
Vue.set(this.card_list, 2, "0");
Vue.set(this.card_list, a, "1");
}
},
})
</script>