前端笔记Vue项目day1(十）

4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮 给每一个li添加点击事件    让当前的索引 index  和  当前 currentIndex 的  值 进项比较 如果相等 则当前li  添加active 类名 当前的 li 高亮  当前对应索引的 div 添加 current 当前div 显示 其他隐藏 [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 37 38 39 40 41 42 43 44 45 46 47 <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>