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选项卡切换效果的更多相关文章

  1. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  2. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  3. js实现网页tab选项卡切换效果

    <style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...

  4. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  6. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  7. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  8. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  9. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

随机推荐

  1. 利用npm安装/删除/查看包信息

    查看远程服务器上的包的版本信息 npm view webpack version //查看npm服务器上包webpack的最新版本 npm view webpack versions //查看服务器上 ...

  2. python编程基础之三十五

    系统的魔术方法:系统的魔术方法特别多,但是也都特别容易懂,简单的讲就是对系统的内置函数进行重写,你需要什么效果就重写成什么样, 比如说len()方法针对的对象本来没有自定义类的对象,但是当你重写了__ ...

  3. Django-debug-toolbar(调试使用)

    Django-debug-toolbar django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. https: ...

  4. Flask源码分析一:服务启动

    前言: Flask是目前为止我最喜欢的一个Python Web框架了,为了更好的掌握其内部实现机制,这两天准备学习下Flask的源码,将由浅入深跟大家分享下,其中Flask版本为1.1.1. Flas ...

  5. Ubuntu使用中遇到的的一些问题

    制作ubuntu启动盘后,U盘只读. ubuntu自带的"启动盘创建器(usb-creator-gtk)"制作启动盘后,U盘只读. 打开ubuntu自带的"磁盘(hard ...

  6. [七年技术总结系列][理论篇]-RBAC权限模型由浅入深

    权限部分将分两章介绍,第一章由浅入深介绍权限理论知识及应用,第二章介绍具体实现.后期再讲述中间件的使用时,还会插入一些权限内容,本质上属于中间件的应用. 权限模块是业务系统最常见.最基本的子集.本章假 ...

  7. POI读入Excel用String读取数值类型失真问题(精度丢失)

    问题:POI读取Excel数值单元格时,读取的小数数值与真实值不一致 话不多说,直接上代码! public static String getRealStringValue(Cell cell) { ...

  8. robotframework+ride+python3环境搭建

    一.windows下安装python3.6 1.官网下载安装包https://www.python.org/downloads/windows/ 2.进行安装,接下来步骤一直next即可 二.cmd下 ...

  9. 学习Spring的思考框架

    引子 很早之前听同事说:“要开会了.我都知道领导要问什么,就那几板斧.”其实领导之所以为领导,人家问的问题确实很合情合理,甚至可以说一针见血.而之所以能问出来这些合理的问题,就是因为头脑中有自己的思考 ...

  10. 别再让你的微服务裸奔了,基于 Spring Session & Spring Security 微服务权限控制

    微服务架构 网关:路由用户请求到指定服务,转发前端 Cookie 中包含的 Session 信息: 用户服务:用户登录认证(Authentication),用户授权(Authority),用户管理(R ...