用vue来实现一个小的选项卡切换，比之前要简单、方便很多。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/vue.min.js"></script>

    <style>

    button{

        width:40px;

        height:30px;

        text-align:center;

        border:none;

        cursor: pointer;

    }

    .active{

        background:red;

        color:#fff;

        border:none;

    }

    </style>

</head>

<body>

    <div id="app">

        <button

         v-for="(val,key) in box"

        @click="changes(key)"

        :class="{active:key == num}"

         >{{key+1}}</button>

        <div

            v-for="(val,key) in box"

            v-show="key==num"

        >{{val}}</div>

    </div>

    <script>

    /*

    运用知识点：

        v-for

        v-on,简写@

        v-bind简写:

        v-show

    思路：

        循环数据，当点击时候，把key传到changes方法中，然后num赋值给active

        循环数组，只要box中key等于num就让它显示出来

    */

   new Vue({

       el:'#app',

       data:{

          box:['俄克拉荷马','萨克拉门托','明尼苏达'],

          num:0

       },

       methods:{

           changes(key){

               this.num = key;

           }

       }

   });

    </script>

</body>

</html>

vue实现一个简单的选项卡的更多相关文章

  1. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  2. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  3. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  4. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  5. 使用Laravel 和 Vue 构建一个简单的SPA

    本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...

  6. 用vue实现一个简单的时间屏幕

    前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...

  7. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  8. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  9. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

随机推荐

  1. 转载:必须收藏！50个最流行的免费Kubernetes工具集

    必须收藏!50个最流行的免费Kubernetes工具集 http://cloud.51cto.com/art/201806/576406.htm 在短短的两年时间里,Kubernetes在容器编排的竞 ...

  2. PLSQL 使用技巧汇总贴(一个坑)

    PLSQL是一款非常强大的工具, 只不过自己不会使用.. 1.记住密码: 首先 工具->首选项 打开 在 oracle 选项下的 登录 历史  定义 带密码存储--勾选 2. 关键字高亮 -- ...

  3. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

  4. BZOJ4943 NOI2017蚯蚓排队（哈希+链表）

    能看懂题就能想到正解.维护所有长度不超过k的数字串的哈希值即可,用链表维护一下蚯蚓间连接情况.由于这样的数字串至多只有nk个,计算哈希值的总复杂度为O(nk),而分裂的复杂度为O(ck^2),询问复杂 ...

  5. IO模型介绍 以及同步异步阻塞非阻塞的区别

      阻塞:用户进程访问数据时,如果未完成IO,等待IO操作完成或者进行系统调用来判断IO是否完成非阻塞:用户进程访问数据时,会马上返回一个状态值,无论是否完成 同步:用户进程发起IO(就绪判断)后,轮 ...

  6. day25 初始面向对象

    类 有具体规范,无具体值对象 有具体的值 dict 类d = {"":""} 对象 自定义一个类格式: class 类名: # 可以跟()或者不跟 属性 = ' ...

  7. day10 递归

    死循环,因此递归必须要定义一个明确的结束条件 def calc(n): print(n) calc(n) calc(10) return 表示终止符号,最终会得出一个确切的返回值,且可以赋值 def ...

  8. 自学Linux Shell14.2-在脚本中使用其他文件描述符

    点击返回 自学Linux命令行与Shell脚本之路 14.2-在脚本中使用其他文件描述符 在脚本中重定向输入和输出,并布局限于以上讲的3个默认的文件描述符,shell最多可以有9个打开的文件描述符.这 ...

  9. 自学Aruba5.3.3-Aruba安全认证-有PEFNG 许可证环境的认证配置Captive-Portal

    点击返回:自学Aruba之路 自学Aruba5.3.3-Aruba安全认证-有PEFNG 许可证环境的认证配置Captive-Portal 1. Captive-Portal认证配置前言 1.1 新建 ...

  10. 【BZOJ1802】[AHOI2009]checker（动态规划）

    [BZOJ1802][AHOI2009]checker(动态规划) 题面 BZOJ 洛谷 题解 首先自己观察一波,发现如果有相邻两个格子都是红色的话,那么显然可以在任意位置都存在一个跳棋.可以让两个位 ...