<!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. 377D

    树形dp 就是求每个点到标记的点的最大距离 一个经典模型 有一个巧妙的方法,我们求出以这些关键点的直径,然后每个点到关键点的最大距离就是到直径两端的距离 #include<bits/stdc++ ...

  2. VS2010打包回顾

    1.  在vs2010 选择“新建项目”à“ 其他项目类型”à“ Visual Studio Installerà “安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1. ...

  3. HDU 2914 Triangle (Fibnacci 数)

    题意:给你一个长度为 n 的木棒,求至少拿掉几根使得剩余的木棒构成不了三角形. 析:为了保证不形成三角形,所以保证两边之和等于最大边是最优,这不就是Fibnacci 数么,由于 n 很小,if-els ...

  4. Android Debuggerd 简要介绍和源码分析（转载）

    转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E ...

  5. Servlet，jsp，jsp的9大内置对象

    以servlet作为控制器 1:servlet的生命周期:以下方法都是servlet容器进行调用 1)构造函数:只被调用一次,当项目启动时或者该servlet被容器第一次调用时,会创建servlet实 ...

  6. shiro错误：Subject does not have permission [user:select]

    使用的是jdbcRealm,在数据库中有相应的权限 错误日志: org.apache.shiro.authz.UnauthorizedException: Subject does not have ...

  7. ACM数论-求组合数

    我们利用这个公式求阶乘和逆元求阶: #include<cstdio> const int N = 200000 + 5; const int MOD = (int)1e9 + 7; int ...

  8. Spring配置文件中未引入dubbo命名空间头部配置而引起的错误案例

    问题描述: Spring配置文件中未引入dubbo命名空间的头部配置而引起项目启动时报出如下错误信息: org.springframework.beans.factory.xml.XmlBeanDef ...

  9. 456 132 Pattern 132模式

    给定一个整数序列:a1, a2, ..., an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj.设计一个算法,当 ...

  10. .NET面试题解析(00)-系列文章索引

    .NET面试题解析(01)-值类型与引用类型 .NET面试题解析(02)-拆箱与装箱 .NET面试题解析(03)-string与字符操作 .NET面试题解析(04)-类型.方法与继承 .NET面试题解 ...