<!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. 记重大失误（SQLserver数据回滚）ApexSQL

    敲了一天代码,脑壳昏,更改数据时忘记加where条件,该数据库又未备份.修改了1800条数据..当时那个着急啊. 各种找解决方法,最后使用ApexSQL Log  完美解决.赞一个 ApexSQL L ...

  2. 原生javascript实现计时器

    成品图如意下所示: 实现加到等于5的时候停止 搭建HTML结构 minutes:<input type="text" value="0"> seco ...

  3. python网络爬虫之三re正则表达式模块

    """ re正则表达式,正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的 一些特定字符,及这些特定字符的组合,组成一个"规则字符串",然后用 ...

  4. 模拟 hihoCoder 1177 顺子

    题目传送门 /* 模拟:简单的照着规则做就可以了,把各种情况考虑到,虽然比赛写的丑了点,但能1Y还是很开心的:) */ #include <cstdio> #include <cst ...

  5. Android内存堆上限Android的缺省值是16M（某些机型是24M）

    转自: http://www.cnblogs.com/jacktu/archive/2010/12/30/1921475.html 大家都知道Android的上层应用是基于 Dalvik Virtua ...

  6. fix for 12c profile

    .for CDBS run as sysDBa CREATE OR REPLACE FUNCTION verify_function (username varchar2, password varc ...

  7. 171 Excel Sheet Column Number Excel表列序号 26进制转10进制

    给定一个Excel表格中的列名称,返回其相应的列序号.示例:    A -> 1    B -> 2    C -> 3    ...    Z -> 26    AA -&g ...

  8. libtool版本过新的问题

      安装过程中出现: libtool: Version mismatch error. This is libtool 2.4.2, but the libtool: definition of th ...

  9. 移动端UI自动化Appium测试——Windows系统Appium环境配置

    1.安装JDK,官网下载即可,这里用的1.8,环境变量配置 2.安装Android sdk,API >= 17,环境变量配置 3.安装Nodejs,官网http://nodejs.org/dow ...

  10. 关于docker入门教程

    简介:docker入门教程 docker入门教程翻译自docker官方网站的Docker getting started 教程,官方网站:https://docs.docker.com/linux/s ...