注意:代码所需vue可以通过npm i vue --save下载,然后引入即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
.red {
background: red;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
.lime {
color: lime;
}
.blue {
color: blue;
}
.purple {
color: purple;
}
.course{
overflow: hidden;
}
.every{
width: 200px;
height: 200px;
border: 1px solid blue;
float: left;
margin: 10px;
}
.area{
overflow: hidden;
}
.every-area{
float: left;
padding: 10px 20px;
margin: 20px;
background: #ccc;
border-radius: 5px;
cursor: pointer;
}
.active{
background: #ff4400;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!-- 案例2 : 导航-->
<h3>当前选中的地区是:{{area[n].name}}</h3>
<div class="area">
<!-- 1.v-for 先遍历数据;2.通过v-bind:class动态绑定样式;3.初始化n;4.点击哪条数据,就把他的index赋值给n -->
<div class="every-area" v-for="(item,index) in area" :class="[index==n?'active':'']" @click="n=index">{{item.name}}</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
// 初始化n
n:0,
//地区
area:[
{
name:"北京",
id:1
},
{
name:"上海",
id:2
},
{
name:"天津",
id:3
},
{
name:"广东",
id:4
}
]
},
})
</script>
</body>
</html>
效果: