下面是通过点击事件，切换当前选中的是第几个标签
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个样式切换的小案例</title>
<style>
.box{
width: 200px;
height: 30px;
background: #ccc;
margin-bottom: 10px;
}
.box.active{
background: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定的时候active要的就是true或false -->
<div class="box" :class="{active:num==index?true:false}" v-for="(item,index) in listArr" @click="clickBox(index)">
{{item+'->'+index}}
</div>
<h1>{{num}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
listArr:[
"UI设计",
"小程序开发",
"Web前端",
"java开发"
],
num: 0
},
methods: {
clickBox(e){
// console.log(e);
this.num = e
}
}
});
</script>
</body>
</html>1.2 显示效果
