【郑州校区】前端笔记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

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

【郑州校区】前端笔记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

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