<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. 策略模式(Strategy

    Strategy 无论什么程序,其目的都是解决问题.而为了解决问题,我们又需要编写特定的算法.使用Strategy模式可以整体地替换算法的实现部分.能够整体地替换算法,能让我们轻松地以不同的算法去解决 ...

  2. BZOJ 4919: [Lydsy1706月赛]大根堆 启发式合并

    我不会告诉你这是线段树合并的好题的... 好吧我们可以搞一个multiset在dfs时求出LIS(自带二分+排序)进行启发式合并,轻松加愉悦... #include<cstdio> #in ...

  3. Uva1608

    如果一个序列的所有子序列中均存在至少一个元素,这个元素在该子序列中只出现一次,则这个序列non-boring. 当一个序列[x,y]中没有元素只出现一次,那么该序列不符合要求,如果有的话,设为第i个元 ...

  4. chapter07

    // 包和引入// 包也可以像内部类那样嵌套// 包路径不是绝对路径// 包声明链x.y.x并不自动 将中间包x和x.y变成可见// 位于文件顶部不带花括号的包声明在整个文件范围内有效// 包对象可以 ...

  5. jquery——尺寸

    1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: <!DOCTYPE html> <html l ...

  6. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  7. (转)centos7优化内核参数详解

    centos7优化内核参数详解 原文:http://blog.csdn.net/xiegh2014/article/details/52132863 cat /etc/sysctl.conf #CTC ...

  8. js车牌号校验

    function cpyz(str) {        var newcarnum= str.value.toUpperCase();    var regExp = /(^[\u4E00-\u9FA ...

  9. log(A/B) = logA -logB

    令 X = logA, Y = logB, Z=log(A/B) .2x = A, 2y = B, 2z = A/B, 则有 2z = A/B = 2x / 2y = 2x-y ,有z = x-y,即 ...

  10. 开源的SSH框架优缺点分析

    开源是3个框架共有的优点 Struts2框架(MVC框架)的优点如下: 1) 实现了MVC模式,层次结构清晰,使程序员只需关注业务逻辑的实现: 2) 丰富的标签库,大大提高了开发的效率: 3) Str ...