1.效果
2.步骤
首先在vue实例中生命一个数组，里面放置导航栏的内容，并声明两个变量，一个控制下方文字的变动，一个控制颜色的变动
然后再创建一个列表，通过v-for遍历数组，将这个数组显示到页面中，然后给这个li绑定一个有前置条件的样式，即当index==hahaha时，li就采用qwe1这个样式，最后给这个li添加一个点击事件，将我们的index作为参数传过去
根据传过来的index的值，来判断当前点击的是哪一个标题，然后做出相应的变化
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>选择菜单
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
<style type="text/css">
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;
}
<div id="app">
<li v-for="(item,index) in list" :class="{ qwe1:index==hahaha}" @click="dianji(index)">{{item.name}}
<div class="qwer">您选择了{{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
}
}
}
