vue中tab切换效果

 第一种方式：

 

<div class="indTabcontrol">
          <div class="indTab">
          <ul>
              <li :class="{'on':showNum === 1}" @click="oneShowClick">商品介绍</li>
              <li :class="{'on':showNum === 2}" @click="twoShowClick">玩法说明</li>
              <li :class="{'on':showNum === 3}" @click="threeShowClick">操作指引</li>
          </ul>
          </div>
          <div class="indTabContent">
               <div class="view" v-if="showNum == 1">
                    <img src="/static/images/1_img1.jpg">
               </div>
               <div class="view" v-if="showNum == 2">玩法说明</div>
               <div class="view" v-if="showNum == 3">操作指引</div>
          </div>
      </div>

export default {
  data () {
    return {
      goods:{},
      showNum:1
    }
  },
  created(){
  },
  methods:{
    oneShowClick(){
      this.showNum=1
    },
    twoShowClick(){
      this.showNum=2
    },
    threeShowClick(){
      this.showNum=3
    }
  }
}

 

 

 

 

详解使用vue实现tab 切换操作      http://www.jb51.net/article/117622.htm