Vue实现选项卡切换效果

HTML:

 1 <ul>
 2    <li v-for="(item,index) in tabs" :class="{active:index == num}"@click="tab(index)">
 3       {{item}}
 4    </li>
 5 </ul>
 6 <div class="tabCon">
 7    <!-- <div v-for='(itemCon,index) in tabContents' v-show=" index == num">
 8       {{itemCon}}
 9    </div> -->
10    <div  v-show=" 0 === num">我是内容一</div>
11    <div  v-show=" 1 === num">我是内容二</div>
12    <div  v-show=" 2 === num">我是内容三</div>
13 </div>

JS:

 1 <script type="text/javascript">
 2             
 3             export default{
 4                 data () {
 5                         return {
 6                             tabs: ["标题一", "标题二","标题三"],
 7                             // tabContents: ["内容一", "内容二","内容三"],
 8                             num: 0
 9                         }
10                     },
11                     methods: {
12                         tab(index) {
13                             this.num = index;
14                         }
15                     }
16                 }
17 </script>

 

转载于:https://www.cnblogs.com/tian-long/p/8417577.html