<!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. Linux系统调用之open(), close() （转载）

    转自:http://joe.is-programmer.com/posts/17463.html open函数可以打开或创建一个文件. #include <sys/types.h> #in ...

  2. mysql 里面的isnull（）和ifnull（） is null 和 is not null

    usergrade表 1.找到里面username是null的行 SELECT * FROM usergrade WHERE ISNULL(USERNAME) SELECT * FROM usergr ...

  3. bzoj 4481: [Jsoi2015]非诚勿扰【期望+树状数组】

    首先很容易计算对于一个如意郎君列表里有x个男性的女性,编号排第i位的男性被选的概率是 \[ p*(1-p)^{i-1}+p*(1-p)^{i-1+n}+p*(1-p)^{i-1+n}+- \] \[ ...

  4. 51nod 1120 机器人走方格 V3 【卡特兰数+卢卡斯定理+组合数】

    -我并不知道为什么事卡特兰数,反正用dp打的表就是卡特兰数,因为是两个三角所以再乘个2 卡特兰数使用\( h(n)=\frac{C_{2n}^{n}}{n+1} \)因为范围比较大所以组合数部分用卢卡 ...

  5. Unix\Linux | 总结笔记 |文件系统_shell重定向

    输入重定向< 从文件中获得命令需要的输入数据,适合数据源已经定义好,可重复使用 #显示文件test.txt的内容 cat < tesxt.txt #统计文件test.txt中的行数 单词数 ...

  6. Boost1.6x+win7+VC2015编译

    下载 通过boost官方网站, 或直接在source forge下载boost_1_6x_0. 可选包 Zlib library, 环境变量: ZLIB_SOURCE bzip2, 环境变量: BZI ...

  7. 2017 JUST Programming Contest 3.0 E. The Architect Omar

    E. The Architect Omar time limit per test 1.0 s memory limit per test 256 MB input standard input ou ...

  8. 洛谷 P3203 [HNOI2010]弹飞绵羊 || bzoj2002

    看来这个lct板子的确没什么问题 好像还可以分块做 #include<cstdio> #include<algorithm> using namespace std; type ...

  9. 题解报告：hdu 2709 Sumsets

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2709 Problem Description Farmer John commanded his co ...

  10. API系列一：REST和RESTful认识

    序言 最近工作的项目一直使用API,就想趁這个机会,把API的知识点进行一次梳理和总结,顺便提升一下自己对API全新的认识 Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建We ...