前端笔记Vue项目 第一天 八

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

<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>