Vue学习（十六）——案例：tab选项卡

最新推荐文章于 2024-04-11 11:03:20 发布
最新推荐文章于 2024-04-11 11:03:20 发布
阅读量513 收藏 2
点赞数 1
分类专栏： Vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44075963/article/details/108914911
版权

目录

一、案例描述

制作一个选项卡，如下图，当我们选择对应的页签时展示对应的图片，比如我们选择orange则展示橘子的图片。
在这里插入图片描述

二、实现静态UI效果

这里我们使用已经准备好的静态页面，也比较简单，默认是展示苹果的页面。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid blue;
        }

        .tab ul li.active {
            background-color: orange;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
        <div class="tab"> <!-- tab栏 -->
            <ul>
                <li class="active">apple</li>
                <li class="">orange</li>
                <li class="">lemon</li>
            </ul> <!-- 对应显示的图片 -->
            <div class="current"><img src="img/apple.png"></div>
            <div class=""><img src="img/orange.png"></div>
            <div class=""><img src="img/lemon.png"></div>
        </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
        }
    });
</script>
</body>
</html>

静态效果如下：
在这里插入图片描述

三、 基于数据重构UI效果

1、将静态的结构和样式重构为基于Vue模板语法的形式

我们需要将静态页面中的所需要的数据抽取出来，用vue模板语法来重构。页签和图片的展示我们使用v-for循环来展示。修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid blue;
        }

        .tab ul li.active {
            background-color: orange;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
        <div class="tab"> <!-- tab栏 -->
            <ul>
                // 为了提高性能，:key也应该加上
                <li :key="item.id" v-for="(item,idnex) in list">{{item.title}}</li>
            </ul> <!-- 对应显示的图片 -->
            <div :key="item.id" v-for="(item,index) in list">
                <img :src="item.path">
            </div>
        </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            list:[{
                id:1,
                title:"apple",
                path:"img/apple.png"
            },
                {
                    id:2,
                    title:"orange",
                    path:"img/orange.png"
                },
                {
                    id:3,
                    title:"lemon",
                    path:"img/lemon.png"
                }]
        }
    });
</script>
</body>
</html>

效果如下：
在这里插入图片描述

我们可以看到，三个图片的div都是存在的，为什么没展示呢？因为目前它们还有默认的样式，display都是none。要想展示，要加一个类名.current。另外，标题栏选中后底色要变成橙色，对应的类是.active。
那么，这俩个样式类添加的原则是什么呢？

重点： 我们选中那个标题页签，就给该页签添加这两个类。那如何区分出当前我们选中的是谁呢？所以我们需要记录下当前索引的位置。因此，我们在数据中添加一个额外的自定义属性currentIndex。通过三目运算符来判断currentIndex是否与当前title的索引一致，如果一致，我们就给它添加样式，否则就是“”。图片的处理也是类似的套路。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid blue;
        }

        .tab ul li.active {
            background-color: orange;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
        <div class="tab"> <!-- tab栏 -->
            <ul>
                <li :class='currentIndex==index?"active":""':key="item.id" v-for="(item,index) in list">{{item.title}}</li>
            </ul> <!-- 对应显示的图片 -->
            <div :class='currentIndex==index?"current":""' :key="item.id" v-for="(item,index) in list">
                <img :src="item.path">
            </div>
        </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            currentIndex:0,   //选项卡当前索引
            list:[{
                id:1,
                title:"apple",
                path:"img/apple.png"
            },
                {
                    id:2,
                    title:"orange",
                    path:"img/orange.png"
                },
                {
                    id:3,
                    title:"lemon",
                    path:"img/lemon.png"
                }]
        }
    });
</script>
</body>
</html>

效果如下：
在这里插入图片描述
至此，样式的处理就完成了。

2、处理事件绑定和js控制逻辑

接下来实现选项卡切换操作：本质就是操作类名。 如何操作类名？就是通过currentIndex，通过Vue的点击事件来实现。完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid blue;
        }

        .tab ul li.active {
            background-color: orange;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
        <div class="tab"> <!-- tab栏 -->
            <ul>
                <li v-on:click="change(index)" :class='currentIndex==index?"active":""':key="item.id" v-for="(item,index) in list">{{item.title}}</li>
            </ul> <!-- 对应显示的图片 -->
            <div :class='currentIndex==index?"current":""' :key="item.id" v-for="(item,index) in list">
                <img :src="item.path">
            </div>
        </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            currentIndex:0,   //选项卡当前索引
            list:[{
                id:1,
                title:"apple",
                path:"img/apple.png"
            },
                {
                    id:2,
                    title:"orange",
                    path:"img/orange.png"
                },
                {
                    id:3,
                    title:"lemon",
                    path:"img/lemon.png"
                }]
        },
        methods:{
            change:function (index) {
                // 在这里实现选项卡切换操作：本质就是操作类名
                // 如何操作类名？就是通过currentIndex
                this.currentIndex=index;
            }
        }
    });
</script>
</body>
</html>

可以实现tab选项卡的切换。

3、声明式编程

模板的结构和最终显示的效果基本一致
在这里插入图片描述

云中、漫步
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现超美选项卡
宋承佑
03-31 367
纯静态的，后续的内容可以自己加上去哟！！！ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
Vue之tab选项卡案例
weixin_45147894的博客
04-13 172
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab u...
选项卡的实现的几种方法
热门推荐
u014395826的博客
02-03 2万+
今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯HTML+CSS，并没有用到JS，JS日后补上。 一、使用：target属性实现选项卡        页面的结构：（html） 选项卡1选项卡2 选项卡1的内容 选项卡2的内容 注意：这里要注意内联元素在元代码中若有回车，则在页面中会出现选项卡的标题之间有一个缝隙，所以如上所示，两个a
JavaScript+CSS生成静态水平选项卡效果
网站开发初中级代码参考-转载
10-05 71
本文介绍一种使用JavaScript+Css设计生成的选项卡效果，只是这里的选项卡是静态的！ 制作过程很简单，这里我使用的语言是asp.net（vs2010）. 1.在新建的.aspx网页body标签中，写入下列代码 &lt;form id="form1" runat="server"&gt; &lt;div id="a_0"&gt; 这是第...
【vue案例】vue实现tab选项卡
马云
11-01 1万+
vue实现tab选项卡 文章目录vue实现tab选项卡一、效果图展示二、静态页面结构csshtmljavascript三、vue实现1、将静态结构和样式重构为基于vue模板语法的形式vue实现ul标签渲染2、处理事件绑定和js控制逻辑vue实现点击切换四、完整代码 一、效果图展示 实现的效果图如下： 二、静态页面结构 css <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .tab { wi
vue 实现 tab 选项卡
m0_69551472的博客
08-11 661
【代码】vue 实现 tab 选项卡。
Vue Tab选项卡案例
z1427094386的博客
08-25 170
点击不同的标题显示出相应的图片 代码如下 <!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">
使用vue.js写一个tab选项卡效果
10-20
Vue 实现 Tab切换实现的场景很多，比如，利用vue-router、利用第三方插件、利用组件等等.本文使用组件来实践tab选项卡
vue中tab选项卡的实现思路
12-11
在Vue中实现选项卡（Tab）功能是一项常见的任务，尤其在创建复杂Web应用时。本文将详细介绍如何在Vue中实现一个基本的选项卡组件，以及涉及的主要知识点。 首先，选项卡在各种场景下都非常实用，例如在注册和登录...
vue子路由跳转实现tab选项卡
12-10
在本例中，我们有4个页面：Tab（tab选项卡页面）、PageOne、PageTwo和PageThree。Tab页面作为父路由，包含了三个子路由PageOne、PageTwo和PageThree： ```javascript import Vue from 'vue' import Router from '...
vue插件tab选项卡使用小结
09-01
在本文中，我们将深入探讨一个基于Vue的插件——`tab_touch`，它提供了一种实现选项卡的方法。这个插件适用于创建带有触摸滑动功能的选项卡，适合移动端应用。 首先，我们来看基本的使用方法。在模板部分，你可以...
elementUI el-tabs 实现动态选项卡页面效果
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-17 2264
【代码】elementUI el-tabs 实现动态选项卡页面效果。
vue案例-Tab选项卡
qq_34082921的博客
01-06 170
【代码】vue案例-Tab选项卡。
基于Vue语法实现Tab选项卡
最新发布
weixin_56286359的博客
04-11 675
使用 Vue 基础语法实现 Tab 选项卡
Vue实现选项卡切换，tab切换
努力变好
10-28 1万+
1、实现tab切换就是 单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确） 2、第一种方法效果图 这个没什么可说的，直接看代码吧（两种方式） 2、第一种完整代码（下边这段代码是我在网上学的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<.
Vue ——tab切换样式
月来better
07-29 1047
login.vue <div :class="[ tab === item.tab ? 'tab_item active' : 'tab_item']" @click="tabName(item.tab)" v-for="item in items" :key="item.tab"> {{ item.tab }} </div> <script> export default { name: "login", data() { return { .
Android UI 之 TabLayout动态添加tab实现筛选及自动偏移（全选，单选）
行动者&&职业化
08-01 1万+
一丶效果展示（代码链接见文末） 二丶概述 1.Android开发，数据的筛选通常由后台处理，网络请求穿不同参数，即可。理论上TabLayout可以实现单选多选的筛选。 2.自动偏移的重要性，1.提醒用户屏幕外有可选项，2.操作简单，体验效果提高。 三丶功能介绍 1.RecyclerView 实现上拉加载下拉刷新 文章参考：http://blog.csdn.net/dt2
element-ui之el-table利用多选实现单选效果
sumimg的博客
09-13 1851
demo中版本element-ui版本为: “^2.15.12”）在element-ui中是为我们准备好了可直接使用的单选与多选属性的。但是单选与多选的形式不一样，在某些情况下我们可能想让它们的选择方式尽量统一，于是我想能不能把利用多选属性实现多选，并用一个变量来控制表格是多选还是单选。要实现单选有两步：一、隐藏多选选择框。二、每次选择只能选择一个。
elementUI的Table分页多选框
Baby_加油_的博客
11-18 2706
目的：实现进入页面显示默认的选中项，在用户重新选择后，将选择的和取消选择的数据提交给后台；这里涉及到一个分页的问题，表格是可分页的表格，所以要存储用户的选项 1.element-ui的table表格的多选框默认选中 data(){ return{ tableData:[],//table数据 } }, watch:{ tableData(val){ this.$nextTick(()=>{ this.tableData.forEach(row => {
vue3——vite:deep()在小程序中不生效
05-16
`deep()` 方法是 Vue.js 3.x 中的一个特殊方法，用于深度监听响应式数据的变化。然而，它并不是小程序原生支持的 API，因此在小程序中使用 `deep()` 方法可能会出现不生效的情况。 如果你需要在小程序中深度监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值