<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <title></title>

        <style type="text/css">

            .active{

                color: red；

　　　　　　　　　　border-bottom: 1px solid red;

　　　　　　　　　　　display: inline-block;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <ul>

                <li

                v-for="(index,items) in tabs"

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

                 @click="tab(index)">{{items}}

                </li>

            </ul>

            <div class="tabCon">

                <div

                    v-for='(index,itemCon) in tabContents'

                    v-show=" index == num">{{itemCon}}

                </div>

            </div>

        </div>

    <!--这里是js代码-->

    <script type="text/javascript">

    var vm = new Vue({

        el: '#app',

        data: {

            tabs: ["标题一", "标题二","标题三"],

            tabContents: ["内容一", "内容二","内容三"],

            num:0

        },

        methods: {

            tab(index) {

                console.log(index)

                this.num = index;

            }

        }

    });

    </script>

    </body>

</html>

vue 选项卡的更多相关文章

  1. vue 选项卡（转载）

    !DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-e ...

  2. 看JQ时代过来的前端，如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

  3. vue的选项卡功能

    选项卡:点击不同的按钮会显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. vue调试神器vue-devtools安装

    vue-devtools安装 vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件; 一. 从chrome商店直接下载安 ...

  5. day 73 初学vue (1)

    前情提要: vue 框架的初学习, 主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list 学习准备,感谢学习资源: vue 官网:https:// ...

  6. Vue（二）：调试神器vue-devtools安装和使用

    前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直 ...

  7. vue+nodejs+express+mysql 建立一个在线网盘程序

    vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1 ...

  8. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  9. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

随机推荐

  1. hdu4975 A simple Gaussian elimination problem.（最大流+判环）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:和hdu4888基本一样( http://www.cnblogs.com/a-clown/ ...

  2. E20180218-hm-xa

    更新: 2019/02/19 原来忘记分类,把此博文归入单词类 vocabulary  n. (某一语言的) 词汇; (尤指外语教科书中附有释义的) 词汇表; grammar  n. 语法; 语法书; ...

  3. 点击button传递消息，但是页面不跳转的解决方法

    最近在做一个物联网的项目时遇到的问题:界面上有很多控制开/关灯的button,通过点击button来控制各个灯的亮灭.我需要将获取的不同的点击事件消息,以Socket通信的方式发送给硬件端的服务监听程 ...

  4. TCP协议中的三次握手和四次挥手(图解)【转载】

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...

  5. P4324 [JSOI2016]扭动的回文串

    传送门 对\(A\).\(B\)串各跑一遍\(manacher\),求出第\(1\).\(2\)类扭动回文串的最大长度. 考虑第三类的扭动回文串\(S(i,j,k)\),一定可以表示为\(A(i,l) ...

  6. 一文了解H5照片上传过程

    一.选择拍照或文件 HTML: 使用<input>标签, type设为"file"选择文件, accept设为"image/*"选择文件为图片类型和 ...

  7. SPOJ GSS3 线段树系列1

    SPOJ GSS系列真是有毒啊! 立志刷完,把线段树搞完! 来自lydrainbowcat线段树上的一道例题.(所以解法参考了lyd老师) 题意翻译 n 个数, q 次操作 操作0 x y把 Ax 修 ...

  8. ROS学习笔记十二：使用gazebo在ROS中仿真

    想要在ROS系统中对我们的机器人进行仿真,需要使用gazebo. gazebo是一种适用于复杂室内多机器人和室外环境的仿真环境.它能够在三维环境中对多个机器人.传感器及物体进行仿真,产生实际传感器反馈 ...

  9. [POI2007]办公楼biu

    Description FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄,FGD决 ...

  10. shell脚本从入门到精通

    阿里云大学 shell脚本从入门到精通 第1 章 : shell脚本编程-变量-算术表达式-判断语句-if分支语句 第2 章 : case-for-While-双括号-循环嵌套-break-conti ...