vue currentIndex是怎么知道点的是哪个的 默认值是0 是如何得到跟index相等的值的呢？小白 求解答

Question

<div id="app">
    <div class="tab">
      <ul>
        <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
      </ul>
      <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
        <img :src="item.path">
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        currentIndex: 0, // 选项卡当前的索引
        list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        },{
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        },{
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }]
      },
      methods: {
        change: function(index){
          this.currentIndex = index;
        }
      }
    });
  </script>

currentIndex是怎么知道点的是哪个的 默认值是0 是如何得到跟index相等的值的呢？小白 求解答

Answer 1

上面代码不是在change方法里面处理了吗，点击li时设置currentIndex