<!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. css3 all属性

    ie不支持,谷歌火狐支持,safari9+支持,移动端高版本支持 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两 ...

  2. css3 vw -----解决页面滚动出现跳动的bug

    100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度. demo: h1{font-size:8vw;} ...

  3. webpack 4.0 相关

    Webpack 4.0发布了!! https://www.jianshu.com/p/3a13f1b37300 webpack详解 https://juejin.im/post/5aa3d2056fb ...

  4. yield示例分析

    yield示例分析 public class TestYield { private static final Object lock = new Object(); public static vo ...

  5. PCB 合拼遍历(全排序+旋转90度) 基本遍历方法

    分享一下PCB合拼的组合的遍历方法,在分享之前先纠正一下 PCB拼板之多款矩形排样算法实现--学习  时间复杂度计算错误  一.PCB 合拼(全排序+旋转90度)的时间复杂度是多少? 二.合拼遍历(全 ...

  6. Spring的事务传播性与隔离级别以及实现事物回滚

    一.事务的四个特性(ACID) 原子性(Atomicity):一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做,要么全部做. 一致性(Consistency): 数据不会因为事务的执行而 ...

  7. PostgreSQL 9.6.2版本在centOS下的安装和配置

    1.如果有用yum安装过旧版,卸载掉: yum remove postgresql* 2.更新一下yum: sudo yum update 3.去 官网 找到 适合你系统 的资源的下载地址,然后使用w ...

  8. 校赛F 比比谁更快(线段树）

    http://acm.cug.edu.cn/JudgeOnline/problem.php?cid=1153&pid=5 题意:给你一个字符串,各两个操作: ch=0,[l,r]降序 ch=1 ...

  9. 441 Arranging Coins 排列硬币

    你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币.给定一个数字 n,找出可形成完整阶梯行的总行数.n 是一个非负整数,并且在32位有符号整型的范围内.示例 1:n ...

  10. String的用法——其他功能

    package cn.itcast_06; /* String类的其他功能: 替换功能: String replace(char old,char new) String replace(String ...