专注前端行业精选
使用vue简单实现选项卡切换效果分享
作者:鹏仔先生日期:2020-06-03 11:48:12浏览:2911分类: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隐藏。
猜你还喜欢
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。