vue tab实例

Bertha 。 2022-03-29 14:26 106阅读 0赞

##                                                         vue tab实例 ##

vue tab选择是我们很常用的一个小功能，这里只是做一个记录，方便查阅，就举一个简单的例子了。效果如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70][]

一、vue代码

（1）html部分

<div class="dataSelect">
            <ul>
              <li v-for="item in navList" :key="item.name" :class="{active: item.name === selectedNav}" @click="clickNavItem(item)">{
       {item.title}}</li>
            </ul>
    </div>

（2）js data部分

navList: [
            {
              name: 'yesterday',
              title: '昨日',
              desc: ''
            },
            {
              name: 'today',
              title: '今日',
              desc: ''
            },
            {
              name: 'week',
              title: '本周',
              desc: ''
            }
          ]

（3）css部分

.dataSelect {
          ul {
            margin-left -5px
            margin-top 3px
            display flex
          }
          ul li {
            list-style-type none
            margin-left 10px
            &:hover {
              cursor pointer
              color red
            }
          }
          .active {
            color red
          }
        }

（4）methods：方法

methods: {
        clickNavItem (item) {
          this.selectedNav = item.name
        }
      }

即可实现哈哈

![20190108215540274.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70]: /images/20220329/c03585d6d3a14a06b59080e8d7bb70d0.png
[20190108215540274.jpg]: /images/20220329/c17b0a9c481840298df2d24ec7c0c87c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js实现tab切换效果

ab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="app"> <ul class="tab-tilt...

古城微笑少年丶/ 2024年04月17日 13:51/ 0 赞/ 62 阅读

相关 jQuery UI 实例 - 标签页（Tabs）

一种多面板的单内容区，每个面板与列表中的标题相关。如需了解更多有关 tabs 部件的细节，请查看 API 文档 [标签页部件（Tabs Widget）][Tabs Widg

矫情吗；*/ 2024年03月24日 17:57/ 0 赞/ 26 阅读

相关 Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一

骑猪看日落/ 2022年10月02日 10:51/ 0 赞/ 268 阅读

相关基于Vue的tab切换代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>tab切换V

╰半橙微兮°/ 2022年06月14日 12:17/ 0 赞/ 237 阅读

相关 Vue实例

每一个组件都是一个Vue的实例，Vue的实例上有很多属性和方法。控制台输入： vm vm.$data vm.$el vm.$destroy()

矫情吗；*/ 2022年04月22日 05:14/ 0 赞/ 267 阅读

相关 vue tab实例

vue tab实例 vue tab选择是我们很常用的一个小

Bertha 。/ 2022年03月29日 14:26/ 0 赞/ 107 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 333 阅读

相关页面的Tab选项卡简单实例

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content

我就是我/ 2021年12月15日 01:55/ 0 赞/ 286 阅读

相关 Vue实例

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

深藏阁楼爱情的钟/ 2021年09月20日 01:08/ 0 赞/ 448 阅读

相关 vue.js--Tab选项卡

一.简单tab切换案例使用vue.js实现tab切换很简单，先使用v-for把数据遍历渲染到页面上，v-for中有一个index表示索引，将index作为参数

雨点打透心脏的1/2处/ 2021年09月14日 02:00/ 1 赞/ 539 阅读