vue选项卡
程序员文章站
2024-03-17 20:47:16
...
vue选项卡
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
* {
padding:0;
margin: 0;
margin: 0 auto;
}
.changeColor {
background: deepskyblue;
color:white;
}
.color {
background:#cccccc;
color:black;
}
.size {
width:402px;
height:402px;
border:1px solid red;
text-align:center;
}
span {
/*display:inline-block;*/
width: 60px;
float: left;
padding:20px;
background:#cccccc;
/*border:1px solid red;*/
}
</style>
</head>
<body>
<div id="app" class="size">
<span v-for="(item,index) of arr"
:class="{changeColor:ind == index}"
@click="change(index)">{{item}}</span>
<p>{{arr[ind]}}</p>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
ind:0,
arr:['html','css','javascript','vue']
},
methods:{
change(index){
this.ind = index;
}
}
})
</script>