<template>
<div>
<p class="tabs" v-for="(list,index) in lists"
:class="index == cur ? 'red':''"
@click="cur = index">
{{list.title}}
</p>
<div class="content" v-for="(list,index) in lists" :style="{display: index==cur ? 'block':'none'}">
{{list.name}}
</div> </div>
</template> <script>
export default {
data () {
return {
lists: [
{
title: "切换1",
name: "内容1111"
},
{
title: "切换2",
name: "内容2222"
}
],
cur: 0
}
}
}
</script> <style scoped>
.tabs {
display: inline-block;
margin-left:10px;
}
.red {
color: red;
}
.content {
padding: 5px;
}
</style>

vue实现tab切换功能精简版的更多相关文章

  1. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  2. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  3. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  4. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  6. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

  7. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  9. Vue如何tab切换高亮最简易方法

    以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...

随机推荐

  1. ORACLE 12.1.0.1 至12.1.0.2升级文档(单机版 DBUA方式)

    12C DBUA新特性 1. 新的pre-upgrade 检查工具. 2. 并行升级. 3. DBUA升级时,默认并行度为CPU个数或2. 并行度可调整. 4. 在升级过程中,DBUA工具可再次调用( ...

  2. mathjax;latex

    \lfloor $\lfloor$ \rfloor $\rfloor$ \sum_{i=1}^{n} $\sum_{i=1}^{n}$ \mu $\mu$ \mid $\mid$ \Leftright ...

  3. 洛谷P4891 序列 || 膜法阵,魔法阵

    https://www.luogu.org/problemnew/show/P4891 一道几乎一样的题http://210.33.19.103/contest/1130/problem/3 题面ht ...

  4. Tensorflow安装教程-Win10环境下

    背景:最新版的Tensoflow已经支持Python3.6 首先,下载并安装Anaconda3 内置Python3.6的版本 https://www.continuum.io/downloads 安装 ...

  5. 配置HEXO

    软件介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 使用版本和操作系统 官网最新版 Windo ...

  6. java对象在内存中的分配

    java对象在内存中的分配 http://blog.csdn.net/qq_30753945/article/details/54974899

  7. postgresql备份数据库

    备份数据库:pg_dump -U username -h localhost -f /me.sql 数据库名; 恢复数据库:psql -U username -h localhost -f /me.s ...

  8. Linux Bash 命令行快捷键小结

    编辑命令          光标移动                                                                        剪切.删除 Ctrl ...

  9. VMWare复制虚拟机系统后,模块“Disk”无法启动【转】

    1.找到虚拟机所在的目录 将 .vmx文件打开 将文件vmci0.present = "TRUE" 改为 vmci0.present = "FALSE" 2.删 ...

  10. Windows安全认证是如何进行的?[Kerberos篇]

    最近一段时间都在折腾安全(Security)方面的东西,比如Windows认证.非对称加密.数字证书.数字签名.TLS/SSL.WS-Security等.如果时间允许,我很乐意写一系列的文章与广大网友 ...