<!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://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script> </head> <body> <!-- 3.实现移动端的tabbar --> <style> .bar { width: 400px; height: 100px; display: flex; justify-content: flex-start; } .tabbar { width: 100px; height: 100px; background-color: pink; } .content .view { width: 400px; height: 400px; background-color: rgb(252, 221, 226); } </style> <div id="box"> <div class="bar"> <div :class="{tabbar:tb}" @click="btn1()">{{msg1}}</div> <div :class="{tabbar:tb}" @click="btn2()">{{msg2}}</div> <div :class="{tabbar:tb}" @click="btn3()">{{msg3}}</div> <div :class="{tabbar:tb}" @click="btn4()">{{msg4}}</div> </div> <div class="content"> <div class="view" :style="{display:d1}"> <span>{{view1}}</span> </div> <div class="view" :style="{display:d2}"> <span>{{view2}}</span> </div> <div class="view" :style="{display:d3}"> <span>{{view3}}</span> </div> <div class="view" :style="{display:d4}"> <span>{{view4}}</span> </div> </div> </div> <script type="text/javascript"> new Vue({ el: "#box", data: { msg1: "消息", msg2: "社区", msg3: "应用", msg4: "我的", view1: "这是消息板块", view2: "这是社区板块", view3: "这是应用板块", view4: "这是我的板块", d1: "none", d2: "none", d3: "none", d4: "none", tb: true, }, methods: { btn1() { this.d1 = "block"; this.d2 = "none"; this.d3 = "none"; this.d4 = "none"; }, btn2() { this.d1 = "none"; this.d2 = "block"; this.d3 = "none"; this.d4 = "none"; }, btn3() { this.d1 = "none"; this.d2 = "none"; this.d3 = "block"; this.d4 = "none"; }, btn4() { this.d1 = "none"; this.d2 = "none"; this.d3 = "none"; this.d4 = "block"; } }, }, ) </script> </body> </html>
标签:none,Vue,端的,tabbar,d4,d2,d3,block,d1 From: https://www.cnblogs.com/LIXI-/p/16644829.html