vue2.0怎么实现导航菜单切换效果

vue2.0怎么实现导航菜单切换效果

本篇内容主要讲解“vue2.0怎么实现导航菜单切换效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue2.0怎么实现导航菜单切换效果”吧!

css

*{    margin:0;    padding: 0;    }    ul li{    list-style: none;    }    .navul{    margin:100px auto 20px;    overflow: hidden;    }    .navul li{    background-color: #5597b4;    padding:18px 30px;    float:left;    color: #fff;    font-size: 18px;    cursor: pointer;    }    .active{    background-color: #5597b4;    }    .home .home,.new .new,.contact .contact,.service .service{    background-color: skyblue;    }    .checked{    background: #eff4f7;    }

html

<div id="nav">    <ul>     <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">     <i></i>     <span class="">{{relation.text}}</span>     </li>    </ul>    </div>

js

<script src="js/vue.js" charset="utf-8"></script>    <script type="text/javascript">    var nav = new Vue({    el:'#nav',    data:{    relations: [     {text:'项目',id:'program'},     {text:'人员',id:'person'},     {text:'机构',id:'organization'},     {text:'技术',id:'tech'},     {text:'地区',id:'location'},     {text:'国家',id:'country'}    ],    nowIndex:-1,    },    methods:{    relationClick:function(index){     this.nowIndex=index;    }    }    });    </script>

效果图：

到此，相信大家对“vue2.0怎么实现导航菜单切换效果”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[