为啥实现不了两个盒子之间的隐藏，类似于top栏切换效果
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul{
width:400px;
height:100px;
background-color:red;
display:flex;
}
ul li{
width:150px;
height:100px;
margin-left:20px;
background-color:green;
text-align:center;
line-height:100px;
}
.box1{
width:400px;
height:400px;
background-color:blue;
display:none;
}
.box2{
width:400px;
height:400px;
background-color:gray;
display:none;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li @click="change1()">1</li>
<li @click="change2()">2</li>
</ul>
<div class="box1" v-show="a">1</div>
<div class="box2" v-show="b">2</div>
</div>
<script>
const vm= new Vue({
el:'#root',
data:{
a:'false',
b:'false',
},
methods:{
change1(){
this.a='true',
this.b='false',
alert('11');
console.log(this.a)
},
change2(){
this.b='true',
this.a='false',
alert('22');
console.log(this.b)
},
}
})
</script>
</body>
</html> 修改后的代码：
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul {
width: 400px;
height: 100px;
background-color: red;
display: flex;
}
ul li {
width: 150px;
height: 100px;
margin-left: 20px;
background-color: green;
text-align: center;
line-height: 100px;
}
.box1 {
width: 400px;
height: 400px;
background-color: blue;
/* display:none; 不需要，是通过v-show决定是否要显示的*/
}
.box2 {
width: 400px;
height: 400px;
background-color: gray;
/* display:none; */
}
</style>
</head>
<body>
<div id="root">
<ul>
<li @click="change1()">1</li>
<li @click="change2()">2</li>
</ul>
<div class="box1" v-show="a">1</div>
<div class="box2" v-show="b">2</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
// a:'false',
// b:'false',
// 去掉true和false外面的引号
a: false,
b: false,
},
methods: {
change1() {
// this.a='true',
// this.b='false',
// 去掉引号，逗号改成分号或者不要符号
this.a = true;
this.b = false;
alert('11');
console.log(this.a)
},
change2() {
// this.b='true',
// this.a='false',
this.b = true;
this.a = false;
alert('22');
console.log(this.b)
},
}
})
</script>
</body>
</html>
页:
[1]