javascript - vue怎么实现tab控件
ringa_lee
ringa_lee 2017-04-10 17:16:09
[JavaScript讨论组]

今天第一天使用vue,只看了官网的资料,有一个这样的需求

<ul v-on:click="selectOne">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

点击给li赋值一个class为action,但只允许有一个action。

不过我发现ul触发的selectOne方法回调参数的event的currentTarget为null,就不知道怎么继续下去了。

求大神指点思路

ringa_lee
ringa_lee

ringa_lee

全部回复(3)
高洛峰

event.target

天蓬老师

点击li,查看同级的li中是否有class为action的,如果有remove,然后给当前点击的li添加action;没有直接添加

天蓬老师

更好的做法是给每一个 tab 命名,然后根据当前的 tab 名用 v-if/v-show/:class 来显示需要的 tab。

<ul>
    <li @click="tab = 'a'" :class="{action: tab === 'a'}"></li>
    <li @click="tab = 'b'" :class="{action: tab === 'b'}"></li>
    <li @click="tab = 'c'" :class="{action: tab === 'c'}"></li>
</ul>
new Vue({
    data() {
        return {tab: 'a'}
    }
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号