vue实现tab选项卡切换效果
tab选项卡切换效果:
通过点击事件传入参数,然后通过v-show来进行切换显示
<template>
<div class="box">
<div class="tab">
<span @click="cur = 0">首页</span>
<span @click="cur = 1">广场</span>
<span @click="cur = 2">我的</span>
</div>
<div class="content">
<div v-show="cur == 0">
首页首页首页首页首页首页首页首页首页首页
</div>
<div v-show="cur == 1">
广场广场广场广场广场广场广场广场广场广场广场
</div>
<div v-show="cur == 2">
我的我的我的我的我的我的我的我的我的我的
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
cur:0
}
}
}
</script>
当我们选项卡增多的时候,代码量也会增大,所以我们可以使用v-for来优化一下代码:
<template>
<div class="box">
<div class="tab">
<span v-for="(item,index) of tab" :key="index" @click="cur = index">{{item}}</span>
</div>
<div class="content">
<div v-for="(item,index) of content" :key="index" v-show="cur == index">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
tab:["首页","广场","我的"],
content:[
"首页首页首页首页首页首页首页首页首页首页",
"广场广场广场广场广场广场广场广场广场广场广场",
"我的我的我的我的我的我的我的我的我的我的"
],
cur:0
}
}
}
</script>
vue实现tab选项卡切换效果的更多相关文章
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- vue实现tab选项卡切换
上代码: <template> <div class="push"> //点击按钮 <div class="tab&qu ...
- js实现网页tab选项卡切换效果
<style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
随机推荐
- 利用npm安装/删除/查看包信息
查看远程服务器上的包的版本信息 npm view webpack version //查看npm服务器上包webpack的最新版本 npm view webpack versions //查看服务器上 ...
- python编程基础之三十五
系统的魔术方法:系统的魔术方法特别多,但是也都特别容易懂,简单的讲就是对系统的内置函数进行重写,你需要什么效果就重写成什么样, 比如说len()方法针对的对象本来没有自定义类的对象,但是当你重写了__ ...
- Django-debug-toolbar(调试使用)
Django-debug-toolbar django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. https: ...
- Flask源码分析一:服务启动
前言: Flask是目前为止我最喜欢的一个Python Web框架了,为了更好的掌握其内部实现机制,这两天准备学习下Flask的源码,将由浅入深跟大家分享下,其中Flask版本为1.1.1. Flas ...
- Ubuntu使用中遇到的的一些问题
制作ubuntu启动盘后,U盘只读. ubuntu自带的"启动盘创建器(usb-creator-gtk)"制作启动盘后,U盘只读. 打开ubuntu自带的"磁盘(hard ...
- [七年技术总结系列][理论篇]-RBAC权限模型由浅入深
权限部分将分两章介绍,第一章由浅入深介绍权限理论知识及应用,第二章介绍具体实现.后期再讲述中间件的使用时,还会插入一些权限内容,本质上属于中间件的应用. 权限模块是业务系统最常见.最基本的子集.本章假 ...
- POI读入Excel用String读取数值类型失真问题(精度丢失)
问题:POI读取Excel数值单元格时,读取的小数数值与真实值不一致 话不多说,直接上代码! public static String getRealStringValue(Cell cell) { ...
- robotframework+ride+python3环境搭建
一.windows下安装python3.6 1.官网下载安装包https://www.python.org/downloads/windows/ 2.进行安装,接下来步骤一直next即可 二.cmd下 ...
- 学习Spring的思考框架
引子 很早之前听同事说:“要开会了.我都知道领导要问什么,就那几板斧.”其实领导之所以为领导,人家问的问题确实很合情合理,甚至可以说一针见血.而之所以能问出来这些合理的问题,就是因为头脑中有自己的思考 ...
- 别再让你的微服务裸奔了,基于 Spring Session & Spring Security 微服务权限控制
微服务架构 网关:路由用户请求到指定服务,转发前端 Cookie 中包含的 Session 信息: 用户服务:用户登录认证(Authentication),用户授权(Authority),用户管理(R ...