设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 为啥实现不了两个盒子之间的隐藏，类似于top栏切换效果
返回列表 发新帖
查看: 2147|回复: 1

为啥实现不了两个盒子之间的隐藏，类似于top栏切换效果

[复制链接]
小黄练编程
发表于 2022-6-12 22:52:13 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8.     <title>Document</title>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  11.     <style>
  12.         ul{
  13.             width:400px;
  14.             height:100px;
  15.             background-color:red;
  16.             display:flex;
  17.         }
  18.         ul li{
  19.             width:150px;
  20.             height:100px;
  21.             margin-left:20px;
  22.             background-color:green;
  23.             text-align:center;
  24.             line-height:100px;
  25.         }
  26.         .box1{
  27.             width:400px;
  28.             height:400px;
  29.             background-color:blue;
  30.             display:none;

  32.         }
  33.         .box2{
  34.             width:400px;
  35.             height:400px;
  36.             background-color:gray;
  37.             display:none;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div id="root">
  43.         <ul>
  44.             <li @click="change1()">1</li>
  45.             <li @click="change2()">2</li>
  46.         </ul>
  47.         <div class="box1" v-show="a">1</div>
  48.         <div class="box2" v-show="b">2</div>
  49.     </div>
  50.     <script>
  51.     const vm=    new Vue({
  52.             el:'#root',
  53.             data:{
  54.                 a:'false',
  55.                 b:'false',
  56.             },
  57.           methods:{
  58.             change1(){
  59.                 this.a='true',
  60.                 this.b='false',
  61.                 alert('11');
  62.               console.log(this.a)

  64.             },
  65.             change2(){
  66.               this.b='true',
  67.               this.a='false',
  68.               alert('22');
  69.               console.log(this.b)

  71.             },

  73.           }
  74.         })
  75.     </script>
  76. </body>
  77. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

全幼儿园最帅
发表于 2022-6-30 17:27:10 | 显示全部楼层
修改后的代码：
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  9.     <title>Document</title>
  10.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  12.     <style>
  13.         ul {
  14.             width: 400px;
  15.             height: 100px;
  16.             background-color: red;
  17.             display: flex;
  18.         }

  20.         ul li {
  21.             width: 150px;
  22.             height: 100px;
  23.             margin-left: 20px;
  24.             background-color: green;
  25.             text-align: center;
  26.             line-height: 100px;
  27.         }

  29.         .box1 {
  30.             width: 400px;
  31.             height: 400px;
  32.             background-color: blue;
  33.             /* display:none; 不需要，是通过v-show决定是否要显示的*/

  35.         }

  37.         .box2 {
  38.             width: 400px;
  39.             height: 400px;
  40.             background-color: gray;
  41.             /* display:none; */
  42.         }
  43.     </style>
  44. </head>

  46. <body>
  47.     <div id="root">
  48.         <ul>
  49.             <li @click="change1()">1</li>
  50.             <li @click="change2()">2</li>
  51.         </ul>
  52.         <div class="box1" v-show="a">1</div>
  53.         <div class="box2" v-show="b">2</div>
  54.     </div>
  55.     <script>
  56.         const vm = new Vue({
  57.             el: '#root',
  58.             data: {
  59.                 // a:'false',
  60.                 // b:'false',
  61.                 // 去掉true和false外面的引号
  62.                 a: false,
  63.                 b: false,
  64.             },
  65.             methods: {
  66.                 change1() {
  67.                     // this.a='true',
  68.                     // this.b='false',
  69.                     // 去掉引号，逗号改成分号或者不要符号
  70.                     this.a = true;
  71.                     this.b = false;
  72.                     alert('11');
  73.                     console.log(this.a)

  75.                 },
  76.                 change2() {
  77.                     //   this.b='true',
  78.                     //   this.a='false',
  79.                     this.b = true;
  80.                     this.a = false;
  81.                     alert('22');
  82.                     console.log(this.b)

  84.                 },

  86.             }
  87.         })
  88.     </script>
  89. </body>

  91. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 02:00

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表