Vue实现tab标题切换实例

本文主要讲述利用Vue实现简单的tab切换效果，有需要的朋友可以参考

方法 一：

1. html部分布局

html部分代码如下所示：

<div id="app">
    <ul class="tab-tilte">
        <li @click="current=0" :class="{hx_activity:current==0}">标题一</li>
        <li @click="current=1" :class="{hx_activity:current==1}">标题二</li>
        <li @click="current=2" :class="{hx_activity:current==2}">标题三</li>
        <li @click="current=3" :class="{hx_activity:current==3}">标题四</li>
    </ul>
    <div class="tab">
        <div v-show="current==0">内容一</div>
        <div v-show="current==1">内容二</div>
        <div v-show="current==2">内容三</div>
        <div v-show="current==3">内容四</div>
    </div>
</div>

2. 给选中部分加css样式

css部分代码如下所示：

li.hx_activity{
	color: #2DA7E0;
	border-bottom: 2px solid #2DA7E0;
}

3. 引入vue.js实现效果

js部分代码如下所示：

<script src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
	    el: '#app',
	    data: {
			current:0,//默认选中第一个
	    }
	})

方法 二：

<div id="app">
   <div class="menuList">
     <ul>
       <li v-for="(item,index) in titles" :key="item.id" :class="{hx_activity:num==index}" @click="getNum(index)">
         {{item}}
       </li>
     </ul>
   </div>
   <div class="tabCon">
     <div v-for='(item,index) in contents' v-show="index == num">
       {{item}}
     </div>
   </div>
</div>

 var app = new Vue({
      el: "#app",
      data() {
        return {
          num: 0,
          titles: ["标题1111", "标题2222", "标题3333"],
          contents: [
            "内容11111111111", 
            "内容22222222222",
            "内容33333333333"
            ],
        }
      },

      methods: {
        getNum(index) {
          this.num = index;
        }
      }

    })