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

method里:

css:

html代码:

<nav>
<ul>
<li>
<a :class="{active : Index == 1}" @click="changeNav(1)">学校新闻</a>
<div v-if="Index == 1" class="line"></div>
</li>
<li>
<a :class="{active : Index == 2}" @click="changeNav(2)">就业新闻</a>
<div v-if="Index == 2" class="line"></div>
</li>
<li>
<a :class="{active : Index == 3}" @click="changeNav(3)">行业新闻</a>
<div v-if="Index == 3" class="line"></div>
</li>
</ul>
</nav>

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);
}

}

最新文章

  1. Netty(一)引题
  2. PHP批量清空删除指定文件夹内容
  3. 在win7下安装unbuntu系统
  4. jQuery mobile 前台设计中的css em的使用。
  5. No valid host was found. There are not enough hosts available
  6. 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用
  7. IE下使用jquery ajax失效
  8. Mac 生产力探究
  9. HDU 1317(Floyd判断连通性+spfa判断正环)
  10. 中篇: php 微信支付 基于Thinkphp3.2开发
  11. object-fit?
  12. oracle中求1到100之间的质数和
  13. Linux Vi 的使用
  14. javascript的介绍、javascirpt的存在形式、javascript注释
  15. svn命令使用;
  16. python 的基础 学习 12天,函数
  17. BugFree3.0.4Linux环境安装指南
  18. js小练习-移除数组中的元素
  19. codeforces 603 A
  20. Hadoop Hive概念学习系列之hive里的JDBC编程入门(二十二)

热门文章

  1. 利用GDAL从内存中直接解析图像数据
  2. phpAdmin修改密码后拒绝访问
  3. Selenium clear()方法无法清掉数据
  4. windows下建立netcore控制台程序,然后传送到centos7下的docker容器里运行
  5. git添加公钥后报错sign_and_send_pubkey: signing failed: agent refused operation
  6. Orcal数据库,使用EF的自增处理
  7. 卸载oracle 10g
  8. 关于解决sql2012编辑器对象名无效问题
  9. 将亚马逊aws的ec2服务器的登陆方式改为密码登陆
  10. October 04th 2017 Week 40th Wednesday