来自：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. 按钮控件JButton的使用

    ---------------siwuxie095                             工程名:TestUI 包名:com.siwuxie095.ui 类名:TestButton. ...

  2. docker创建容器打开两个端口

     docker run -d -it --name c6_3 -v :/mnt -p 5000:8000 -p 3000  centos  注释: -v 后面为共享文件夹

  3. IDEA01 创建java项目、创建web项目

    注意:本教程使用的开发环境是:(专业版) 1 创建javaSE项目 1.1 file -> new -> project 注意:如果是第一次使用,就需要配置 project SDK  , ...

  4. java的邮件系统实现

    想要java中邮件发送和接收邮件,首先需要支持SMTP- pop/pop3/IMAP协议,发送的话还需要配置文件,来对程序提供相应的接口,只需要这两个文件,就可以实现邮件的接收发送, 协议为jar包封 ...

  5. 主键primary key和唯一索引unique index

    1)主键一定是唯一性索引,唯一性索引并不一定就是主键. 2)主键就是能够唯一标识表中某一行的属性或属性组,一个表只能有一个主键,但可以有多个候选索引. 3)主键常常与外键构成参照完整性约束,防止出现数 ...

  6. Android 之 信息通知栏消息Notification

    Notification是安卓手机顶部的消息提示 这里我们分别设置两个按钮,来实现顶部消息的发送和取消 功能实现 首先要在主Activity中设置一个通知控制类 NotificationManager ...

  7. python3-file文件操作

    # Auther: Aaron Fan '''打开文件的模式有三种:r,只读模式(默认).w,只写模式.[不可读:不存在则创建:存在则删除内容:因为会清空原有文件的内容,一定要慎用]a,追加模式.[可 ...

  8. 在windows中安装OpenSSH，无密码登录，永远不断线

    到这里下载最新安装包:https://github.com/PowerShell/Win32-OpenSSH/releases下载下来解压,然后用管理员打开服务器自带的PowerShell,运行下列命 ...

  9. HttpServletResponse和HttpServletRequest详解.RP

    HttpServletResponse,HttpServletRequest详解 1.相关的接口   HttpServletRequest HttpServletRequest接口最常用的方法就是获得 ...

  10. js/jq基础（日常整理记录）-3-一个自定义表格

    一.一个自定义的表格 这个js是我刚工作的时候,我们老大让我做一个功能,我觉得html自带的table功能单一,没有分页和排序功能,所有就尝试着做一下,所以这个东西就出来了.很久没写博客了,贴出来吧, ...