【郑州校区】前端笔记Vue项目 第一天 九

4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮
给每一个li添加点击事件   
让当前的索引 index  和  当前 currentIndex 的  值 进项比较
如果相等 则当前li  添加active 类名 当前的 li 高亮  当前对应索引的 div 添加 current 当前div 显示 其他隐藏

[AppleScript] 纯文本查看 复制代码

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

【郑州校区】前端笔记Vue项目 第一天 九

4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮
给每一个li添加点击事件   
让当前的索引 index  和  当前 currentIndex 的  值 进项比较
如果相等 则当前li  添加active 类名 当前的 li 高亮  当前对应索引的 div 添加 current 当前div 显示 其他隐藏

[AppleScript] 纯文本查看 复制代码

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