时间:2021-07-01 10:21:17 帮助过:4人阅读
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。