<!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="./vue.js"></script>
</head>
<style>
.box1{
width: 300px;
height: 300px;
background-color: gray;
text-align: center;
line-height: 300px;
}
.box2{
width: 300px;
height: 300px;
background-color: pink ;
text-align: center;
line-height: 300px;
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
text-align: center;
line-height: 300px;
}
.show{
display: block;
}
.hide{
display: none;
}
button{
width: 100px;
height: 50x;
border-radius: 80px;
background: red;
}
button:hover{
background: gray;
}
</style>
<body>
<div id="app">
<!-- 传参 传入1 , 2 , 3-->
<button @click="changeJudeg(1)">按钮一</button>
<button @click="changeJudeg(2)">按钮二</button>
<button @click="changeJudeg(3)">按钮三</button>
<!-- 使用动态的类名 -->
<div class="box1" :class="num==1 ?'show':'hide'">box1</div>
<div class="box2" :class="num==2 ?'show':'hide'">box2</div>
<div class="box3" :class="num==3 ?'show':'hide'">box3</div>
</div>
</body>
<script>
//数据驱动 ,数据优先。思维放在处理数据上。摒弃操作节点
//数据响应式
new Vue({
el:"#app",
data:{
num:1
},
methods:{
changeJudeg(num){
this.num= num
console.log(this.num);
}
}
})
</script>
</html>
Vue实现简易选项卡
最新推荐文章于 2023-11-01 15:36:00 发布