VUE.JS(vue)简单实现TAB标签栏高亮切换---

VUE.JS(vue)简单实现TAB标签栏高亮切换—

今天咱给大家分享一个小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li {
            cursor: pointer;
            list-style: none;
        }
        
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <ul>
            <li v-on:click='btnClick(index)' v-for='(m,index) in movies' v-bind:class='currentIndex==index?"active":""'>{{index}}: {{m}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                movies: ['贰零贰壹', '新年快乐', '恭喜发财', '红包拿来'],
                //这isActive为0(也可以改写为false)
                isActive: 0,
                //这currentIndex就是数组中第一个(贰零贰壹)为默认样式(字体为红色)
                currentIndex: 0
            },
            methods: {
                btnClick: function(index) {
                    this.currentIndex = index;
                }
            }
        })
    </script>
</body>

</html>

首先v-on:click='btnClick(index)'这段初始结构是v-on:click='btnClick’这个对吧因为我下面methods里面写了点击函数,我就的要参数参数就是我这个index传进来之后条件围绕下标来就是currentIndex我是在methods里我必须加this是吧,当我点击谁我就让点击谁的index=我的currentIndex

然后v-bind:class='currentIndex==index?“active”:""'我再用这个实现class里面我还写了一个三元表达式如果我currentIndex能跟我的index对应上就加样式不能的话样式就为空(排他思想)

这就vans了

谢谢大家的浏览

上一篇:apifox设置获取token


下一篇:图解如何评估项目的工作量?