来自：https://juejin.im/post/5a0c191f6fb9a04514639419

1、联动

新增 <input v-model="msg" />

<div id="app">

  <!-- 模板，用于展示数据 -->

  {{msg}}<br/>

  <input v-model="msg" />

</div>

效果

当删除/修改/新增 文本框中的字符时，上边的也会跟着一起变。

2、选项卡

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="js/vue.js"></script>

  <style>

    body {

      font-family: "Microsoft YaHei";

    }

    #tab {

      width: 600px;

      margin: 0 auto;

    }

    .tab-tit {

      font-size: 0;

      width: 600px;

    }

    .tab-tit a {

      display: inline-block;

      height: 40px;

      line-height: 40px;

      font-size: 16px;

      width: 25%;

      text-align: center;

      background: #ccc;

      color: #333;

      text-decoration: none;

    }

    .tab-tit .cur {

      background: #09f;

      color: #fff;

    }

    .tab-con div {

      border: 1px solid #ccc;

      height: 400px;

      padding-top: 20px;

    }

  </style>

</head>

<body>

  <div id="tab">

    <div class="tab-tit">

      <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->

      <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>

      <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>

      <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>

      <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>

    </div>

    <div class="tab-con">

      <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->

      <div v-show="curId===0">

        html

        <br/>

      </div>

      <div v-show="curId===1">

        css

      </div>

      <div v-show="curId===2">

        javascript

      </div>

      <div v-show="curId===3">

        vue

      </div>

    </div>

  </div>

</body>

<script>

  new Vue({

    el: '#tab',

    data() {

      return {

        curId: 0

      }

    },

    computed: {},

    methods: {},

    mounted: function () {

    }

  })

</script>

</html>

vue（5）联动+tab页的更多相关文章

  1. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  2. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  3. 【vue】vue中实现标签页

    前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...

  4. SPA项目开发之tab页实现

    实现思路及细节 1.利用前面博客所讲的Vuex的知识:定义几个变量 Options:存放tab页对象的容器(主要是路由路径以及tab页的名字) activeIndex:被激活的tab页路由路径 sho ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  6. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  7. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  8. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  9. 自制tab页

    没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...

随机推荐

  1. 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）

    1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...

  2. ZXing开发详解

    博客转载自:https://blog.csdn.net/skillcollege/article/details/38852183 什么是Z*? 在Android平台做过二维码相关模块的肯定都熟知ZX ...

  3. 1用java实现冒泡排序算法以及解决的几个小问题。

    package huawei.exam; public class BubbleSort { /** * @param args */ public static void main(String[] ...

  4. 关于IE6下绝对定位元素莫名消失的问题

    一般来说,让绝对定位的元素不挨着浮动元素就OK了: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致: 2.当绝对定位层的邻近浮动层的宽度不等于父层宽 ...

  5. java打成jar包后,class,getResource()出现null指针异常

    1.SqlHelper.java有包路径没?如果有,是不是类似于com.db.jdbc? 不管怎么办,你SqlHelper.class.getResourceAsStream("/mysql ...

  6. [raspberry pi3] 串口线使用

    直接上图 GPIO 口说明: 串口线连接: 参考地址: http://bbs.elecfans.com/jishu_596578_1_1.html

  7. 一个android dex 转java源码工具

    和dex2jar,smali2java比起来,这个工具至少结果是正确的,前两者对于循环,异常等的处理明显逻辑就是错误的. 该小工具是基于androguard制作,本来是想自己写一个,后来一找居然有现成 ...

  8. metasploit 读书笔记-EXPLOITATION

    一、渗透攻击基础 1.常用命令 show exploits 显示Meta框架中所有可用的渗透攻击模块。 show options 显示模块所需要的各种参数 back 返回Meta的上一个状态 sear ...

  9. Python中的Numpy包

    通过本次学习你可以掌握Numpy Numpy介绍(获取地址)更多Numpy函数 numpy的主要对象是同质多维数组.也就是在一个元素(通常是数字)表中,元素的类型都是相同的. numpy的数组类被成为 ...

  10. 最小生成树算法 prim kruskal两种算法实现 HDU-1863 畅通工程

    最小生成树 通俗解释:一个连通图,可将这个连通图删减任意条边,仍然保持连通图的状态并且所有边权值加起来的总和使其达到最小.这就是最小生成树 可以参考下图,便于理解 原来的图: 最小生成树(蓝色线): ...