Vue實現(xiàn)簡單選項卡效果

更新時間：2022年03月02日 12:42:15 作者：沒餡兒小籠包

這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)簡單選項卡效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

1.頭部選項卡

點擊切換下標(biāo)ID 傳遞一個參數(shù)回去，active綁定選中樣式

<div id="app">
? ? ? ? <ul>
? ? ? ? ? ? <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
? ? ? ? ? ? ? ? <h1> {{item.title}}</h1>
? ? ? ? ? ? </li>
? ? ? ? </ul>
</div>

2.完整HTML

默認(rèn)使用V-show來切換，獲取盒子下標(biāo)，沒有dom操作

當(dāng)然，Vue官方文檔也不推薦V-if和V-for同時使用

<div id="app">
? ? ? ? <ul>
? ? ? ? ? ? <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
? ? ? ? ? ? ? ? <h1> {{item.title}}</h1>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
? ? ? ? ? ? <h1>{{item.content}}</h1>
? ? ? ? </div>
</div>

3.Vue

下標(biāo)默認(rèn)為0

<script>
? ? ? ? //清除默認(rèn)提示樣式
? ? ? ? Vue.config.devtools = false
? ? ? ? Vue.config.productionTip = false
? ? ? ? let vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? //下標(biāo)ID 默認(rèn)從零開始
? ? ? ? ? ? ? ? ? ? TabId: 0,
? ? ? ? ? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Itachi',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'VUE'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Sasuke',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'HTML'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Obito',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'CSS'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Madara',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'JavaScript'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
?
? ? ? ? ? ? ? ? //將點擊事件獲取的下標(biāo)ID傳遞給要切換的盒子
? ? ? ? ? ? ? ? check(index) {
? ? ? ? ? ? ? ? ? ? this.TabId = index;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? }
? ? ? ? });
</script>

4.完整代碼

<!DOCTYPE html>
?
<html lang='en'>
?
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<style>
? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? ? list-style: none;
? ? }
?
? ? #app ul {
? ? ? ? width: 800px;
? ? ? ? background: black;
? ? ? ? opacity: .9;
? ? ? ? margin: 100px auto;
? ? ? ? display: flex;
? ? ? ? justify-content: space-between;
? ? }
?
? ? #app li {
? ? ? ? width: 300px;
? ? ? ? text-align: center;
? ? ? ? cursor: pointer;
? ? ? ? color: #fff;
? ? }
?
? ? #app li:hover {
? ? ? ? cursor: pointer;
? ? }
?
? ? #app li.active {
? ? ? ? background: #03a9f4;
?
? ? }
?
? ? .mycontent {
? ? ? ? width: 800px;
? ? ? ? height: 500px;
? ? ? ? margin: 0 auto;
? ? ? ? background: #03a9f4;
? ? ? ? opacity: .8;
? ? ? ? display: flex;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? }
</style>
?
<body>
? ? <div id="app">
? ? ? ? <ul>
? ? ? ? ? ? <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
? ? ? ? ? ? ? ? <h1> {{item.title}}</h1>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
? ? ? ? ? ? <h1>{{item.content}}</h1>
? ? ? ? </div>
? ? </div>
?
?
? ? <script>
? ? ? ? //清除默認(rèn)提示樣式
? ? ? ? Vue.config.devtools = false
? ? ? ? Vue.config.productionTip = false
? ? ? ? let vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? //下標(biāo)ID 默認(rèn)從零開始
? ? ? ? ? ? ? ? ? ? TabId: 0,
? ? ? ? ? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Itachi',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'VUE'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Sasuke',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'HTML'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Obito',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'CSS'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: 'Madara',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: 'JavaScript'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
?
? ? ? ? ? ? ? ? //將點擊事件獲取的下標(biāo)ID傳遞給要切換的盒子
? ? ? ? ? ? ? ? check(index) {
? ? ? ? ? ? ? ? ? ? this.TabId = index;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? }
? ? ? ? });
? ? </script>
</body>
?
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: