首页
登录 | 注册

vue tab实例

                                                        vue tab实例

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

vue tab实例

 一、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
    }
  }

即可实现哈哈

vue tab实例

 



2020 jeepxie.net webmaster#jeepxie.net
10 q. 0.008 s.
京ICP备10005923号