<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. iptables端口转发规则(内网端口转外网端口)

    需求:外网124.202.173.118需要访问 10.45.225.70的内网54032端口,10.45.225.70服务器有公网地址139.129.109.81将内网地址端口转发到外网地址端口,并 ...

  2. Django基础(5) ----基于双下划线的跨表查询,聚合查询,分组查询,F查询,Q查询

    一.基于双下划线的跨表查询 Django 还提供了一种直观而高效的方式在查询(lookups)中表示关联关系,它能自动确认 SQL JOIN 联系.要做跨关系查询,就使用两个下划线来链接模型(mode ...

  3. eclipse类自动生成注释

    1.创建新类时自动生成注释 window->preference->java->code     styple->code     template 当你选择到这部的时候就会看 ...

  4. bitnami-redmine Apache服务启动不起来

    方法一: 通过 netstat -a -o 查看端口占用情况,关闭调用相关端口的进程.  c:\> netstat -a -o  Active Connections  Proto  Local ...

  5. ubuntu tomcat https

    1.generate key use java key tool -storepass *** 2.sign certificate sudo keytool -export -alias ### - ...

  6. SpringBoot | 第三章:springboot配置详解

    基于springboot的约定优于配置的原则,在多数情况下,启动一个应用时,基本上无需做太多的配置,应用就能正常启动.但在大部分开发环境下,添加额外配置是无所避免的,比如自定义应用端口号(比较在机器比 ...

  7. Java排序算法(一)

    Java排序算法(一) 排序的基本概念和分类 1.1排序的定义 在<大话数据结构>中,排序定义为,假设含有n个记录的序列为{r1,r2,...,rn},其相应的关键字{k1,k2,..., ...

  8. EF增删查改加执行存储过程和sql语句,多种方法汇总

    ActionUrl c = new ActionUrl() { ActionName="test", RequestUrl="/123/123", SubTim ...

  9. Unity C# Sting.Format的学习

    String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项. String.Format (String, Obj ...

  10. javascript 获取dom书的下一个节点。

    利用javascript 写一个在页面点击加减按钮实现数字的累加.. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" valu ...