0
点赞
收藏
分享

微信扫一扫

【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)


【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)_vue.js

完整代码

注意:加载<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>


举报

相关推荐

0 条评论