vue实现菜单切换功能

vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。

method里：

 css:

html代码：

 

 

 学校新闻
 

 
 

 就业新闻
 

 
 

 行业新闻
 

 
 
 

js代码：

data () {
 return {
 Index:1,
}
 },

methods:

{//导航切换
changeNav(index){
 if(index == 1){

 this.Index = 1;
 }else if(index == 2){
 this.Index = 2;
 }else if(index == 3){
 this.Index = 3
 }
 },

css代码：

.news-container nav li .line{
 width: 50px;
 height: 4px;
 background: #E96463;
 border: none;
 position: relative;
 top: -4px;
 right: -86px;
}
.news-container nav li .active{
 color: rgba(233,100,99,1);
}
} 

总结

以上所述是小编给大家介绍的vue实现菜单切换功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！