4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮

• 给每一个li添加点击事件   
• 让当前的索引 index  和  当前 currentIndex 的  值 进项比较
• 如果相等 则当前li  添加active 类名 当前的 li 高亮  当前对应索引的 div 添加 current 当前div 显示 其他隐藏
• [AppleScript] 纯文本查看 复制代码

   <div id="app">
          <div class="tab">
              <ul>
                  <!--  通过v-on 添加点击事件   需要把当前li 的索引传过去 
  				-->
                  <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>
      new  Vue({
          el: '#app',
              data: {
                  currentIndex: 0, // 选项卡当前的索引  默认为 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) {
                      // 通过传入过来的索引来让当前的  currentIndex  和点击的index 值 相等 
                      //  从而实现 控制类名    
                      this.currentIndex = index;
                  }
              }
      
      })
  
  </script>

  
  

4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮

• 给每一个li添加点击事件   
• 让当前的索引 index  和  当前 currentIndex 的  值 进项比较
• 如果相等 则当前li  添加active 类名 当前的 li 高亮  当前对应索引的 div 添加 current 当前div 显示 其他隐藏
• [AppleScript] 纯文本查看 复制代码

   <div id="app">
          <div class="tab">
              <ul>
                  <!--  通过v-on 添加点击事件   需要把当前li 的索引传过去 
  				-->
                  <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>
      new  Vue({
          el: '#app',
              data: {
                  currentIndex: 0, // 选项卡当前的索引  默认为 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) {
                      // 通过传入过来的索引来让当前的  currentIndex  和点击的index 值 相等 
                      //  从而实现 控制类名    
                      this.currentIndex = index;
                  }
              }
      
      })
  
  </script>