<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <div  id="app">

    <div class="button" v-for="(item, index) in list" :class="{ active: visible == index}" @click="clickToIndex(index)">

        {{ item.label }}

    </div>

  </div>

</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        list: [

          {

            label: '你'

          },

          {

            label: '我'

          },

          {

            label: '他'

          }

        ],

        visible: ''

      },

      methods: {

        clickToIndex (index) {

          this.visible = index

        }

      }

    })

  </script>

</body>

<style>

  .button{

    display: inline-block;

    margin-left: 2px;

    width: 2rem;

    height: 0.7rem;

    font-size: 12px;

    color: #7a82e8;

    line-height: 0.7rem;

    text-align: center;

    border-radius: 0.7rem;

    border: 1px solid #7a82e8;

    margin-top: 0.2rem;

    margin-right: 0.2rem;

  }

  .active {

    background-color: red

  }

</style>

</html>

超级简单的tab点击的更多相关文章

  1. 使用jQuery实现简单的tab框

    html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta ...

  2. (一)在HTML页面中实现一个简单的Tab

    在HTML页面中实现一个简单的Tab 为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容.本文将采用一种最为简单的方法来实现类似如Tab页切换的效果 ...

  3. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  4. 短视频SDK超级简单易用

    超级简单易用的短视频SDK来自RDSDK.COM.锐动天地为开发者提供短视频编辑.视频直播.特效.录屏.编解码.视频转换,等多种解决方案,涵盖PC.iOS.Android多平台.以市场为导向,不断打磨 ...

  5. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  6. vs2015制作一个超级简单的MVC项目

    使用vs2015制作一个超级简单的MVC项目   本文链接:https://blog.csdn.net/qq_40919762/article/details/100705314 直奔主题一,创建一个 ...

  7. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  8. JavaScript，一个超级简单的方法判断浏览器的内核前缀

    先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...

  9. zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT

    zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...

随机推荐

  1. AVI文件格式

    AVI文件采用的是RIFF文件结构方式.波形音频wave,MIDI和数字视频AVI都采用这种格式存储. AVI文件的整体结构如下图所示 构造RIFF文件的基本单元叫做数据块(Chunk),每个数据块包 ...

  2. 图解HTTP（二）

    第四章 返回结果的HTTP状体码 1.状态码告知从服务器返回的结果   类别 原因短语 1XX Infomational信息性状态码 接收的请求正在处理中 2XX Success成功状态码 请求正常处 ...

  3. 基于代理类实现Spring AOP

    目录 ProxyFactoryBean类介绍 基于JDK动态代理的Spring  AOP实现 基于CGLIB代理的Spring  AOP实现 Spring的通知类型 ProxyFactoryBean类 ...

  4. 使用Blynk打造一款物联网产品

    前言 一直以来想自己打造一款物联网产品. 围绕这个话题写过一些文章: 一辆树莓派可编程小车的问题 基于树莓派的积木化编程解决方案 物联网相关开源项目整理 物联网.开源硬件与开源社区 之前在一辆树莓派可 ...

  5. JS基础 浏览器弹出的三种提示框（提示信息框、确认框、输入文本框）

    浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...

  6. .net core中使用Quartz任务调度

    使用xml配置Quartz任务调度程序 1.Nuget Install-Package Quartz Install-Package Quartz.Plugins 2.站点根目录下加入文件quartz ...

  7. MySQL MHA工作原理

    MHA工作组件 MHA(Master High Availability)是一种MySQL高可用解决方案,由日本DeNA公司开发,主要用于在故障切换和主从提升时进行快速切换,并最大程度保证数据一致性. ...

  8. Spring中获取被代理的对象

    目录 Spring中获取被代理的对象 获取Spring被代理对象什么时候可能会用到? Spring中获取被代理的对象 Spring中获取被代理的对象 ### 获取Spring被代理对象的JAVA工具类 ...

  9. 一套不错的docker lnmp

    github地址:https://github.com/yeszao/dnmp 镜像基于linux alpine 内存占用小 安装常用软件采用apk命令

  10. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...