刚刚入行不久,现在开始在慢慢学习VUE 现在需要这样一个导航的功能 ,但是如何将它用vue的方式表示出来呢?求大神(另外 如何在点击切换它的时候 不要那么生硬 带点平滑的效果 )
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
    header {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        overflow-x: scroll;
    }
    header::-webkit-scrollbar {
        display: none;
    }

    .nav {
        display: inline-block;
        margin-left: 15px;
        margin-right: 10px;
        height: 50px;
        line-height: 50px;

    }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
<header>

<div class="nav">
    基本信息1
</div>
<div class="nav">
     基本信息2
</div>
<div class="nav">
     基本信息3
</div>
<div class="nav">
    基本信息4
</div>
<div class="nav">
     基本信息5
</div>
<div class="nav">
    基本信息6
</div>
<div class="nav">
     基本信息7
</div>
<div class="nav">
     基本信息8
</div>
<div class="nav">
     基本信息9
</div>
<div class="nav">
     基本信息10
</div>

</header>
<script type="text/javascript">

$(function(){
    $(".nav").on("click",function(ev){
        var moveX = $(this).position().left+$(this).parent().scrollLeft();
        var pageX = document.documentElement.clientWidth;
        var blockWidth = $(this).width();
        var left = moveX-(pageX/2)+(blockWidth/2);
       $(this).css("color","red").siblings().css("color","#000000");
        $("header").scrollLeft(left);


    })




});

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