首页 > 其他分享 >用Vue框架实现 - 移动端的tabbar

用Vue框架实现 - 移动端的tabbar

时间:2022-08-31 22:56:15浏览次数:62  
标签:none Vue 端的 tabbar d4 d2 d3 block d1

<!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

相关文章

  • 用Vue框架实现 - 点击出现下拉框
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"con......
  • npm安装vue,在vue/dist目录下没有产生vue.js文件 只在vue后面加上@2指定版本即可。 np
    npm安装vue,在vue/dist目录下没有产生vue.js文件遇到问题:在进行npminstall时,vue/dist目录下没有生成vue.js的情况。解决办法:只在vue后面加上@2指定版本即可。npmin......
  • vue3学习
    资料:http://docs.vikingship.xyz/ 声明类型:   1.使用ref可以声明基础数据   2.使用reactive声明对象数据     3.computed可以返回一个不变的响应......
  • arco-design-vue 按需引入+自动 import+模板组件提示
    非常感谢番薯有才在飞书中的回复,以下核心步骤均由他提供:使用vite创建一个vue-ts类型的项目,并安装所需的最小依赖:yarncreatevitearco-design-vue-auto-import-......
  • Vue路由动态改变浏览器标题名称和图标样式
    路由constrouter=newRouter({mode:'hash',base:process.env.BASE_URL,router:[{path:'/',redirect:'home'......
  • @vue/cli 安装及'vue' 不是内部或外部命令解决办法
    1、首先安装@vue/clinpminstall-g@vue/cli提示安装成功,版本啥的,忘了截图2、然后vue-V或者vue--version查看版本但是提示'vue'不是内部或外部命令解决办法我......
  • vue3进阶学习
    vue3进阶学习官方网站:https://v3.vuejs.org/中文文档:https://staging-cn.vuejs.org/guide/introduction.html目的:加强对vue3的学习了解vue3在生产环境下需要安装......
  • vue——vuex四个map方法的使用
    1.mapState方法:用于帮助我们映射state中的数据为计算属性注意1:mapState的作用:用来生成重复代码,比如returnthis$store.state.xxx就非常重复,无法复用。mapState采用{k:v}......
  • 20220829 第一组 于芮 Vue坏人Tomcat入门
     小白成长记——第三十七天    这几天的主要学习内容就是Vue以及简单的Tomcat在ideal中的配置,总体来说说学习内容很多,每天都很充实,时间都用来学习,整个人都很开心......
  • vue直接赋值后数据不更新
    在写vue的时候,存在某些情况,明明赋值给model了,页面数据不变化。原因我就不仔细分析了,下面直接上解决办法:1.1、Vue不能检测以下变动的数组当你利用索引直接设置一个项时,......