4、 给每一个tab栏添加事件,并让选中的高亮

• 4.1 、让默认的第一项tab栏高亮
  • tab栏高亮 通过添加类名active 来实现   （CSS  active 的样式已经提前写好）
    • 在data 中定义一个 默认的  索引 currentIndex  为  0
    • 给第一个li 添加 active 的类名  
      • 通过动态绑定class 来实现   第一个li 的索引为 0     和 currentIndex   的值刚好相等
      • currentIndex     ===  index  如果相等  则添加类名 active  否则 添加 空类名
        
        
      
      
    
    
• 4.2 、让默认的第一项tab栏对应的div 显示
  • 实现思路 和 第一个 tab 实现思路一样  只不过 这里控制第一个div 显示的类名是 current
  • [AppleScript] 纯文本查看 复制代码

    <ul>
    	   <!-- 动态绑定class   有 active   类名高亮  无 active   不高亮-->
           <li  :class='currentIndex==index?"active":""'
               :key='item.id' v-for='(item,index) in list'
               >{{item.title}}</li>
      </ul>
    	<!-- 动态绑定class   有 current  类名显示  无 current  隐藏-->
      <div :class='currentIndex==index?"current":""' 
           
           :key='item.id' v-for='(item, index) in list'>
            <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
            <img :src="item.path">
      </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'
                    }]
                }
        })
    
    </script>

  • 
    
    
  
  

4、 给每一个tab栏添加事件,并让选中的高亮

• 4.1 、让默认的第一项tab栏高亮
  • tab栏高亮 通过添加类名active 来实现   （CSS  active 的样式已经提前写好）
    • 在data 中定义一个 默认的  索引 currentIndex  为  0
    • 给第一个li 添加 active 的类名  
      • 通过动态绑定class 来实现   第一个li 的索引为 0     和 currentIndex   的值刚好相等
      • currentIndex     ===  index  如果相等  则添加类名 active  否则 添加 空类名
        
        
      
      
    
    
• 4.2 、让默认的第一项tab栏对应的div 显示
  • 实现思路 和 第一个 tab 实现思路一样  只不过 这里控制第一个div 显示的类名是 current
  • [AppleScript] 纯文本查看 复制代码

    <ul>
    	   <!-- 动态绑定class   有 active   类名高亮  无 active   不高亮-->
           <li  :class='currentIndex==index?"active":""'
               :key='item.id' v-for='(item,index) in list'
               >{{item.title}}</li>
      </ul>
    	<!-- 动态绑定class   有 current  类名显示  无 current  隐藏-->
      <div :class='currentIndex==index?"current":""' 
           
           :key='item.id' v-for='(item, index) in list'>
            <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
            <img :src="item.path">
      </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'
                    }]
                }
        })
    
    </script>

  •