前端笔记Vue项目day1(九）

 

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] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

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