当前位置:Gxlcms > JavaScript > vue2.0实现导航菜单切换效果

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

时间:2021-07-01 10:21:17 帮助过:4人阅读

本文实例为大家分享了vue2.0实现导航菜单切换的具体代码,供大家参考,具体内容如下

css

  1. *{
  2. margin:0;
  3. padding: 0;
  4. }
  5. ul li{
  6. list-style: none;
  7. }
  8. .navul{
  9. margin:100px auto 20px;
  10. overflow: hidden;
  11. }
  12. .navul li{
  13. background-color: #5597b4;
  14. padding:18px 30px;
  15. float:left;
  16. color: #fff;
  17. font-size: 18px;
  18. cursor: pointer;
  19. }
  20. .active{
  21. background-color: #5597b4;
  22. }
  23. .home .home,.new .new,.contact .contact,.service .service{
  24. background-color: skyblue;
  25. }
  26. .checked{
  27. background: #eff4f7;
  28. }

html

  1. <div id="nav">
  2. <ul>
  3. <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)">
  4. <i></i>
  5. <span class="">{{relation.text}}</span>
  6. </li>
  7. </ul>
  8. </div>

js

  1. <script src="js/vue.js" charset="utf-8"></script>
  2. <script type="text/javascript">
  3. var nav = new Vue({
  4. el:'#nav',
  5. data:{
  6. relations: [
  7. {text:'项目',id:'program'},
  8. {text:'人员',id:'person'},
  9. {text:'机构',id:'organization'},
  10. {text:'技术',id:'tech'},
  11. {text:'地区',id:'location'},
  12. {text:'国家',id:'country'}
  13. ],
  14. nowIndex:-1,
  15. },
  16. methods:{
  17. relationClick:function(index){
  18. this.nowIndex=index;
  19. }
  20. }
  21. });
  22. </script>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行