来自：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. JavaScript中的匿名函数及函数的闭包（转）

    JavaScript中的匿名函数及函数的闭包  https://www.cnblogs.com/wl0000-03/p/6050108.html 1.匿名函数 函数是JavaScript中最灵活的一种 ...

  2. SpringBoot12 QueryDSL02之利用QueryDSL实现多表关联查询

    1 业务需求 有的系统业务逻辑比较复杂,存在着多表关联查询的的情况,查询的内容不仅仅是单张表的的内容而是多张表的字段组合而成的,直接使用SplringDataJPA实现是比较复杂的,但是如果使用Que ...

  3. echarts柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能

    ---------------------------------------------------------代码区---------------------------------------- ...

  4. iOS UITableView制作类似QQ好友列表视图

                #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDele ...

  5. patch请求--501错误

    通过命令 tail -f /var/log/wildfly/wrapper.log -n 1000 查看控制台: 并没有报红. 未显示具体哪行代码有错误. debug运行patch请求,根本没有进入p ...

  6. debug－－－null Pointer Exception--一步步查找(1)

    找到对应的226行代码: 通过debug打断点,然后选中需要查看的代码,右击,选择Evaluate Expresstion,选择确认,就可以弹出具体的值,发现真的为null. 通过simon帮忙分析, ...

  7. Bootstrap 的 Tooltip 和 Popover

    简介 Tooltip 指提示框,Popover 指弹出框. Tooltip 默认 Tooltip 功能是关闭的,使用前要手动开启. $(function () { $('[data-toggle=&q ...

  8. C#中 ACCESS数据库常用操作语句...容易出错的地方(DateTime类型)

    这次在C#编程过程中,第一次用到了ACCESS数据库,重点涉及到时间类型,整数类型.是否类型....;遇到了许多困难,就把这些整理了下来,与大家分享. 一.Insert语句的基本格式: INSERT ...

  9. 抽象类（abstract）【转】

    抽象类(abstract) abstract修饰符可以和类.方法.属性.索引器及事件一起使用.在类声明中使用abstract修饰符以指示某个类只能是其它类的基类.标记为抽象或包含在抽象类中的成员必须通 ...

  10. 【C#】 WebApi 路由机制剖析

    C#进阶系列——WebApi 路由机制剖析:你准备好了吗? 转自:https://blog.csdn.net/wulex/article/details/71601478 2017年05月11日 10 ...