百变鹏仔-专注前端行业精选
使用vue简单实现选项卡切换效果分享
作者:鹏仔先生日期:2020-06-03 11:48:12浏览:4086分类:JavaScript
好久没更新了,敷衍下,嘿嘿!
使用vue简单实现选项卡切换效果
简单写了点样式,自行复制查看
附代码
<style scoped> .menu{ display: flex; align-items: center; } .menu span{ color: #444950; font-size: 12px; line-height: 24px; background: #f5f6f7; padding: 0 6px; display: block; cursor: pointer; } .show{ color: #fff !important; background: #1877f2 !important; } </style>
<div class="menu"> <span @click="btn(1)" :class="{show:tab === 1}">菜单一</span> <span @click="btn(2)" :class="{show:tab === 2}">菜单二</span> <span @click="btn(3)" :class="{show:tab === 3}">菜单三</span> </div> <div class="content"> <span v-if="tab == 1">内容一</span> <span v-if="tab == 2">内容二</span> <span v-if="tab == 3">内容三</span> </div>
<script> export default { data () { return { tab: 1 } }, methods: { btn (key) { this.tab = key } } } </script>
效果比较简单,就不加注释了。
其实也就是点谁传谁的值,点击后将值赋予他,最终对比成立为true显示,否则false隐藏。
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。