用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. Tor源码阅读与改造（一）

    0x00 前言 由于公司需求,需要掌握洋葱网络的整体架构和部分详细实现细节,并对Tor进行针对性的改造.在查询Tor官方相关文档和google各种网站后,得到的信息仍无法达到目的,所以便开始了阅读To ...

  2. php函数值传值/地址以及引用的用法

    博客摘自  奔跑的大白,网址: http://www.cnblogs.com/gauze/p/5568867.html 1.先来解释一下名词. 值传递(passl-by-value)过程中,被调函数的 ...

  3. K3CLOUD新增用户

    1.在金蝶云之家对应的产品序列中新增用户 2.在CLOUD本地查询用户-同步注册用户后,云平台用户会同步至本地

  4. 简单FTP服务器搭建

    1 配置IIS 打开控制面板-卸载程序-点击 打开或关闭windows功能-勾选 internet信息服务-确定 2 配置iis web站点 开始菜单-搜索iis并进入iis管理器(计算机-右键-管理 ...

  5. DevexpressVCL v51

    Dev经典套件v49版 支持Delphi2010 DevExpress公司出品的Borland Delphi和C++ Builder的控件(包含完整源代码).ExpressVerticalGrid:就 ...

  6. 面向对象基础及UML建模语言

    1.面向对象的方法起源于面向对象程序设计语言,其发展过程大体经历了初始阶段.发展阶段和成熟阶段. 2.面向对象方法主要优点 (1)从认识论的角度可以看出,面向对象方法改变了开发软件的方式. (2)面向 ...

  7. linux 内核参数优化----最大线程数限制及当前线程数查询

    1.总结系统限制有: /proc/sys/kernel/pid_max #查系统支持的最大线程数,一般会很大,相当于理论值 /proc/sys/kernel/thread-max max_user_p ...

  8. 【CF960G】Bandit Blues（第一类斯特林数,FFT）

    [CF960G]Bandit Blues(第一类斯特林数,FFT) 题面 洛谷 CF 求前缀最大值有\(a\)个,后缀最大值有\(b\)个的长度为\(n\)的排列个数. 题解 完完全全就是[FJOI] ...

  9. 【转】IAR IDE for MSP430、8051、ARM等平台的结合使用

    IAR IDE for MSP430.8051.ARM等平台的结合使用 以前很长一段时间使用IAR作为MSP430的开发平台,前几天一个无线监控的项目用到了Zigbee(CC2530),于是开始使用I ...

  10. 洛谷 P4174 [NOI2006]最大获利 解题报告

    P4174 [NOI2006]最大获利 题目描述 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU 集团旗下的 CS&T 通讯公司在新一代通讯技术血战的前夜,需要 ...