来自：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. C++数组对象和构造函数

    定义数组对象以后,对数组中的对象初始化的方式分为两种: 一种方式是在定义的时候用列表初始化 A a[5] = {A(1),A(2),A(3),A(4),A(5)}; 一种方式是在定义了数组对象以后,再 ...

  2. SpringBoot05 数据操作02 -> JPA接口详解

    概览 JpaRepository 继承 PagingAndSortingRepository 继承 CrudRepository 继承 Repository 1 Repository 这是一个空接口, ...

  3. nexus admin 从文件角度进行密码重置

    \sonatype-work\nexus\conf\security.xml 文件中保存账号密码信息. 打开 vi nexus-2.10.0-02-bundle\sonatype-work\nexus ...

  4. 7-n!末尾有几个0

    如何确定一个N!末尾有多少个零 转载 2015年08月30日 15:02:49 622 题目:1*2*3*……*100 求结果末尾有多少个零 分析:一般类似的题目都会蕴含某种规律或简便方法的,阶乘末尾 ...

  5. php学习笔记-php中的比较运算符

    其中比较难懂的是==和=== ==是只比较两个变量的值,不仅仅是用于比较两个数是否相等,还可以比较int和string,不过会先转化string为int类型再比较,值相等则返回true,值不相等则返回 ...

  6. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-002插入排序法(Insertion sort)

    一.介绍 1.时间和空间复杂度 运行过程 2.特点: (1)对于已排序或接近排好的数据,速度很快 (2)对于部分排好序的输入,速度快 二.代码 package algorithms.elementar ...

  7. opencv中读写视频

    1.介绍 OpenCV 读写视频之前,先介绍一下编解码器(codec) .如果是图像文件, 我们可以根据文件扩展名得知图像的格式.但是此经验并不能推广到视频文件中. 有些 OpenCV 用户会碰到奇怪 ...

  8. 同一个id出现多条数据的问题

    这是disial出现的一个bug,花了近两天时间才解决,原因,要在dto的类前加上注解,让它延迟加载. -----后期补充.结合代码.

  9. 神奇的overflow:hidden及其背后的原理

    先来看两个overflow:hidden的使用例子 1.嵌套布局内部块元素设置float:left时,导致外部元素塌方,高度为0的问题. <div class="wrap"& ...

  10. [转]ORA-12516, TNS:listener could not find available handler with matching protocol stack

    转至:http://blog.csdn.net/MichaelSrc/article/details/6760247 1.查看当前连接进程数 SQL>select count(*) from v ...