<!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. JS获得本月的第一天和最后一天

    <script> //本月第一天  function showFirstDay()  {      var Nowdate=new Date();      var MonthFirstD ...

  2. 表单中的readOnly 和disabled

    readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: disabled也可以禁用按钮和链接: <butt ...

  3. c语言程序设计案例教程（第2版）笔记（六）—字符串处理实例

    字符串处理 功能描述:从键盘输入一个文本行后,为用户提供菜单选择,实现字符串一些操作——显示文本行.查找并替换指定子串.删除指定子串.统计指定子串数目. 实现代码: #include<stdio ...

  4. SQL 初级教程学习（四）

    1. union,union all SELECT E_Name FROM Employees_ChinaUNIONSELECT E_Name FROM Employees_USA 默认地,UNION ...

  5. Lomsat gelral cf-600e

    http://codeforces.com/contest/600/problem/E 暴力启发式合并就行了 提示:set的swap的复杂度是常数,这方面可以放心 我先打了一个很naive的算法 #i ...

  6. 题解报告：hdu 1062 Text Reverse

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1062 Problem Description Ignatius likes to write word ...

  7. PWA之serviceWorker应用

    1.serviceWorker介绍service worker是一段运行在浏览器后台的JavaScript脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...

  8. D. Mahmoud and a Dictionary 种类并查集

    http://codeforces.com/contest/766/problem/D 所谓种类并查集,题型一般如下:给定一些基本信息给你,然后又给出一些信息,要求你判断是真是假.例如给出a和b支持不 ...

  9. ajax post 提交数据到服务端时中文乱码解决方法

    get 方式提交数据到服务端不会乱码,但对数据量有限制;post 可以提交大数据量,但中文会发生乱码,解决方法: 在JS上用使用 encodeURIComponent 对字符编码处理: student ...

  10. Sort排序浅聊

    集合是什么?笔者简易描述:数组是不可变的,所以我们使用集合来代替. using.System.Collections; 非泛型集合 using.System.Collections.Gernerc;泛 ...