1.效果
2.步骤
首先在vue实例中生命一个数组,里面放置导航栏的内容,并声明两个变量,一个控制下方文字的变动,一个控制颜色的变动
然后再创建一个列表,通过v-for遍历数组,将这个数组显示到页面中,然后给这个li绑定一个有前置条件的样式,即当index==hahaha时,li就采用qwe1这个样式,最后给这个li添加一个点击事件,将我们的index作为参数传过去
根据传过来的index的值,来判断当前点击的是哪一个标题,然后做出相应的变化
选择菜单
li {
float:left;
width:50px;
height:30px;
border:chocolate 1px solid;
text-align:center;
line-height:30px;
color:#e2eded;
background:coral;
list-style:none;
margin-left:5px;
}
ul{
overflow:hidden;
}
.qwe1 {
background:#ff7fd7;
}
.qwer {
margin-top:10px;
margin-left:100px;
}
{{item.name}}您选择了{{name}}
var vm =new Vue({
el:"#app",
data: {
name:'home',
hahaha:0,
list: [
{name:'home'},
{name:'菜单1'},
{name:'菜单2'},
{name:'菜单3'},
]
},
methods: {
dianji(index) {
if (index ==0) {
this.name ='home'
this.hahaha = index
}else if (index ==1) {
this.name ='菜单1'
this.hahaha = index
}else if (index ==2) {
this.hahaha = index
this.name ='菜单2'
}else {
this.name ='菜单3'
this.hahaha = index
}
}
}
如果觉得《html5导航栏点击之后变色 vue实现导航栏点击当前标题变色》对你有帮助,请点赞、收藏,并留下你的观点哦!