对比jQuery和Vue.js实现导航板块方法的区别

网页中经常会有类似这种的版块：

它的功能需求是：

上方一行导航，下方的内容会根据上方导航变化。

上方导航会高亮显示当前是第几页。

我们先用原生JS来实现它：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <style type = "text/css">
            #wrapper{
                width: 500px;
                height: 400px;
                background: #00ff0022;
                position: relative;
            }
            #nav{
                width: 100%;
                height: 72px;
            }
            #nav>div{
                float: left;
                background-color: #00ff0022;
                padding: 29px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            #nav>div.active{

                background-color: #00ff0066;

            }
            .contents{
                width: 480px;
                height: 300px;
                margin:0px auto;
                background: #00ff0022;
                display: none;

            }
            .contents.active{
                display: block;
            }
        </style>
    </head>
    <body>

        <div id = "wrapper">
        <div id = "nav">
            <div index = "0" class = "active">Section1</div>
            <div index = "1">Section2</div>
            <div index = "2">Section3</div>
            <div index = "3">Section4</div>
        </div>
            <div class = "contents active"><h3>Page1</h3>voluptatibus qui dolorem</div>
            <div class = "contents"><h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
            <div class = "contents"><h3>Page3</h3>consectetur earum id aut harum facere?</div>
            <div class = "contents"><h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo</div>
        </div>

        <script type = "text/javascript" src = "jquery-3.5.1.js"></script>
        <script type = "text/javascript">

　　　　　　　var sectionList = document.getElementById("nav").getElementsByTagName("div");

var pageList = document.getElementsByClassName("contents");

console.log(sectionList);

for(let i = 0;i<sectionList.length;i++){

sectionList[i].addEventListener("click",function(){

for(let j = 0;j<sectionList.length;j++){

sectionList[j].removeAttribute("class");

}

this.setAttribute("class","active");

for(let j = 0;j<pageList.length;j++){

pageList[j].setAttribute("class","contents");

}

pageList[parseInt(this.getAttribute("index"))].setAttribute("class","contents active");

});

}

</script>
    </body>
</html>

可以发现原生JS操作DOM比较麻烦。

jQuery可以直接用选择器找DOM元素，并且如果找到的是一组元素组成的数组，也无需遍历这个数组，直接就可以给他们每个设置事件监听。还有addClass和removeClass这样的方法。

所以，相同的功能，jQuery只需以下几行代码：

$("#nav div").click(function(){
            $("#nav div").removeClass("active");
            $(this).addClass("active");

            $(".contents").removeClass("active");
            $(".contents").eq(parseInt($(this).attr("index"))).addClass("active");
        });

如果用Vue实现，思路如下：

<body>

        <div id = "wrapper">
            <div id = "nav">
                <div v-bind:class="isActive1?'active':''" v-on:click="click1">Section1</div>
                <div v-bind:class="isActive2?'active':''" @click="click2">Section2</div><!-- v-on可以简写为@ -->
                <div :class="isActive3?'active':''" @click="click3">Section3</div> <!-- v-bind 可以简写为一个冒号 -->
                <div :class="{active:isActive4}" @click="click4">Section4</div><!-- 也可以将属性值设置为一个对象  类名：bool变量 -->
            </div>
            <div class = "contents" :class = "{active:isActive1}"><h3>Page1</h3>voluptatibus qui dolorem</div>
            <div class = "contents" :class = "{active:isActive2}"><h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
            <div class = "contents" :class = "{active:isActive3}"><h3>Page3</h3>consectetur earum id aut harum facere?</div>
            <div class = "contents" :class = "{active:isActive4}"><h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo</div>
        </div>

        <script type = "text/javascript" src = "vue.js"></script>
        <script type = "text/javascript">
        var vue1 = new Vue({
            el:"#wrapper",
            data:{
                isActive1:true,
                isActive2:false,
                isActive3:false,
                isActive4:false
            },
            methods:{
                clearHighLight:function(){
                    this.isActive1 = false;
                    this.isActive2 = false;
                    this.isActive3 = false;
                    this.isActive4 = false;
                },
                click1:function(){
                    this.clearHighLight();
                    this.isActive1 = true;
                },
                click2:function(){
                    this.clearHighLight();
                    this.isActive2 = true;
                },
                click3:function(){
                    this.clearHighLight();
                    this.isActive3 = true;
                },
                click4:function(){
                    this.clearHighLight();
                    this.isActive4 = true;
                }
            }
        });
            
        </script>
    </body>

这样看起来比较麻烦，但是如果用v-for指令来实现:

    <body>

        <div id = "wrapper">
            <div id = "nav">
                <div v-for="(navContent,index) in navContents" @click="change(index)" :class="{active:index==activeIndex}">
                    {{navContent}}
                </div>
            </div>
            <div v-for = "(content,index) in contents" v-html="content" class = "contents" :class="{active:index==activeIndex}"></div>
        </div>

        <script type = "text/javascript" src = "vue.js"></script>
        <script type = "text/javascript">
        var vue1 = new Vue({
            el:"#wrapper",
            data:{
                navContents:["Section1","Section2","Section3","Section4"],
                contents:["<h3>Page1</h3>voluptatibus qui dolorem",
                "<h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
                "<h3>Page3</h3>consectetur earum id aut harum facere?",
                "<h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo"
                ],
                activeIndex:0
            },
            methods:{
                change:function(input){
                    this.activeIndex = input;
                }
            }
        });
        </script>
    </body>

由此可见，vue做重复性的类列表元素比较方便

posted @ 2021-01-02 16:05 lucascube 阅读(118) 评论(0) 收藏举报

刷新页面返回顶部

lucascode

对比jQuery和Vue.js实现导航板块方法的区别

公告