html5导航栏点击之后变色,vue实现导航栏点击当前标题变色

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

}

}

}