tab 切换

 

    <ul>
      <li v-for="(item, index) in movies" v-bind:class="{active: keyVal === index}" v-on:click="tabShift(index)">
        {{item}}</li>
    </ul>
    <div v-show="keyVal == 0">tab 1 content </div>
    <div v-show="keyVal == 1">tab 2 content </div>
    <div v-show="keyVal == 2">tab 3 content </div>

 <script>
  const vue = new Vue({
    el: '#app',
    data: {
      counter: 0,
      movies: ["tab1", "tab2", "tab3"],
      keyVal: 0

    },
    methods: {
      tabShift: function(val) {
        this.keyVal = val;
      }
    }
  });
  </script>