<!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. DEDECMS文章标题显示不全的原因以及解决方法

    首先这里说一下编码问题:UTF-8与GBK(通常为GB2312). GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准):GBK编码专门用来解决中文编码的,是双字节的 ...

  2. Flask第三方组件 之 Flask-Session

    原生session:交由客户端保管机制,安全性相对较差,优势是一点都不占用服务器空间 Flask-Session: 解决原生session的劣势 安装包 from flask import Flask ...

  3. let 和 var 定义变量的区别

    一.变量提升 var 存在变量提升,而 let 不存在变量提升,所以用 let 定义的变量一定要在声明后再使用,否则会报错. var //var定义的变量存在变量提升,变量会把声明提升到整个作用域的最 ...

  4. 【RocketMQ】同一个项目中，同一个topic，可以存在多个消费者么？

    一.问题答案 是不可以的 而且后注册的会替换前注册的,MqConsumer2会替换MqConsumer,并且只结束tag-2的消息 /** * @date 2019/05/28 */ @Compone ...

  5. xtrbackup备份,及恢复数据

    模拟定时任务周日备份数据,周一数据变化,周一crontab定时任务增量备份,周二数据变化,周二crontabl增量备份,然后有人删库,我们进行恢复数据 模拟crontab 里的定时任务周日全备 [ro ...

  6. Linux之RHEL7root密码破解（一）

    很多时候我们都会有这样的经历,各种密码,各种复杂,忘记了怎么办???Windows的有关密码忘记了是可以通过相关的邮箱啊手机号等等是可以 找回的,那么Linux的root密码忘记了,该怎么办呢?那么接 ...

  7. 矩阵迹tr(AA*)的计算公式证明

    与tr(AB)=tr(BA)的证明思路相同,均使用矩阵的元素表示形式进行证明.

  8. Unity进阶:行为树 01

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  9. SVN (TortioseSVN) 版本控制之忽略路径（如：bin、obj）

    在SVN版本控制时,新手经常会遇到这样的问题: 1.整个项目一起提交时会把bin . gen . .project 一同提交至服务器 2.避免提交编译.本地配置等文件在项目中单独对src.res进行提 ...

  10. 使用 Word 写作论文时设置格式技巧记录

    这里主要记录使用 Word 2013 版本的 Microsoft office Word 软件进行论文书写时的一些常用的格式设置技巧,以供分享与记录. Word文档页脚添加页码 Word设置多级标题格 ...