Vue实现菜单切换功能

本文实例为大家分享了VUE实现菜单内容切换功能，供大家参考，具体内容如下

完整代码

 
 
 
 
  *{
  margin: 0px auto;
  padding: 0px;
  }
  #app{
  margin-top: 50px;
  width:400px;
  height:300px;
  border: 1px solid #000000;
  }
  li{
  list-style: none;
  float: left;
  width: 100px;
  height:50px;
  line-height:50px;
  font-size: 18px;
  font-weight: bold;
  background: #EEeeee;
  text-align: center;
  cursor: pointer;
  }
  #wear div{
  width: 400px;
  height: 250px;
  line-height: 250px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  }
  #wear img{
  width: 400px;
  height: 250px;
  }
  .active{
  background: #405c83;
  }
 
 
 
 
  

  
1
 
  
2
  
3
  
4
  
  
  
  
  
  
  
 
 
 
 

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。