关于vue写法转换

Question

关于vue写法转换

发布于
2018-11-24

刚刚入行不久,现在开始在慢慢学习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>

html javascript

阅读 1.4k

1 个回答

讲实话，你这样问基本上没人会回答的，问题太简单（稍微看下文档就能解决的事情），没人给你点踩或者关掉问题已经很良心了。

你自己去vue官网先把基本教程看下，知道vue怎么写，然后再把循环和过渡两章看一下就基本会了，动画的话用css3（自己去学），你这样会让人以为你只想伸手找人拿代码，sf社区是不提倡这样的问答方式的

撰写回答