vue 选项卡(转载)
- !DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
- <meta name="apple-mobile-web-app-title" content="Vue选项卡">
- <title>Vue实现选项卡</title>
- <script type="text/javascript" src="../js/vue.js"></script>
- </head>
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .box {
- width: 800px;
- height: 200px;
- margin: 0 auto;
- border: 1px solid #000;
- }
- .tabs li {
- float: left;
- margin-right: 8px;
- list-style: none;
- }
- .tabs .tab-link {
- display: block;
- width: 250px;
- height: 49px;
- text-align: center;
- line-height: 49px;
- background-color: #5597B4;
- color: #fff;
- text-decoration: none;
- }
- .tabs .tab-link.active {
- height: 47px;
- border-bottom: 2px solid #E35885;
- transition: .3s;
- }
- .cards {
- float: left;
- }
- .cards .tab-card {
- display: none;
- }
- .clearfix:after {
- content: "";
- display: block;
- height: 0;
- clear: both;
- }
- .clearfix {
- zoom: 1;
- }
- </style>
- <body>
- <div id="app" class="box">
- <ul class="tabs clearfix">
- <li v-for="(tab,index) in tabsName">
- <a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
- </li>
- </ul>
- <div class="cards">
- <div class="tab-card" style="display: block;">这里是HTML教程</div>
- <div class="tab-card">欢迎来到CSS模块</div>
- <div class="tab-card">嗨,这里是Vue</div>
- </div>
- </div>
- </body>
- <script>
- var app = new Vue({
- el: "#app",
- data: {
- tabsName: [{
- name: "HTML",
- isActive: true
- }, {
- name: "CSS",
- isActive: false
- }, {
- name: "Vue",
- isActive: false
- }],
- active: false
- },
- methods: {
- tabsSwitch: function(tabIndex) {
- var tabCardCollection = document.querySelectorAll(".tab-card"),
- len = tabCardCollection.length;
- for(var i = 0; i < len; i++) {
- tabCardCollection[i].style.display = "none";
- this.tabsName[i].isActive = false;
- }
- this.tabsName[tabIndex].isActive = true;
- tabCardCollection[tabIndex].style.display = "block";
- }
- }
- })
- </script>
- </html>
vue 选项卡(转载)的更多相关文章
- vue 插件tab选项卡(转载)
<template> <tab :options="tabOpt" :state.sync="stateIndex"></tab& ...
- Vue学习心得----新手如何学习Vue(转载)
ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为 ...
- 2017 年比较 Angular、React、Vue 三剑客(转载)
为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...
- vue 选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- vue实例-转载
http://blog.csdn.net/yuanyuanispeak/article/details/73526795
- 看JQ时代过来的前端,如何转换思路用Vue打造选项卡组件
前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...
- vue的选项卡功能
选项卡:点击不同的按钮会显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue调试神器vue-devtools安装
vue-devtools安装 vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件; 一. 从chrome商店直接下载安 ...
- day 73 初学vue (1)
前情提要: vue 框架的初学习, 主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list 学习准备,感谢学习资源: vue 官网:https:// ...
随机推荐
- Verdi调用VCS进行交互式仿真
前一篇介绍了使用Verdi的后处理模式查看仿真波形进行调试,此外Verdi还支持交互模式,可以调用外部仿真器,下面介绍Verdi调用VCS进行交互模式仿真的方法.注意,这里介绍的方法需要2016版的V ...
- 确定有限自动机 valid number
原题地址:http://oj.leetcode.com/problems/valid-number/ 题意:判断输入的字符串是否是合法的数. 解题思路:这题只能用确定有穷状态自动机(DFA)来写会比较 ...
- 8 stark组件 展示数据
1.编辑按钮构建完成 1.必备知识预习 2.mark_safe模块:将html标签安全传输 3.构造表单数据 4.反向解析 https://www.cnblogs.com/yuanchenqi/art ...
- CF 1114 D. Flood Fill
D. Flood Fill 链接 题意: 一个颜色序列,每个位置有一个颜色,选择一个起始位置,每次可以改变包含这个位置的颜色段,将这个颜色段修改为任意一个颜色, 问最少操作多少次.n<=5000 ...
- 洛咕 P2403 [SDOI2010]所驼门王的宝藏
简单tarjan. 一行的横天门如果暴力连边会被卡成平方,所以只要相邻两个横天门连双向边,再随便选一个横天门向整行连边即可.纵寰门同理.ziyou门直接map暴力连边. 然后tarjan直接dp. / ...
- 【ORACLE】ORACLE RAC设置控制文件多路
[oracle@rac01 ~]$ srvctl stop database -d proc -o immediate [oracle@rac01 ~]$ sqlplus / as sysdba SQ ...
- .Net Core和.Net Standard直观理解
.NET framework和.NET Core里面有一些部分,内容是相同的. 这部分相同的内容,就被称为标准库...即NET Standard Library. 而那些不同的部分,则分别叫做.NET ...
- weblogic在linux和window下的安装
weblogic在linux和window下的安装 weblogic下载地址 Windows server2008 一直下一步没什么坑 centos6.5 使用rpm安装jdk8 JDK下载 安装jd ...
- ci框架学习整理
-- -- 表的结构 `yi_article` -- CREATE TABLE IF NOT EXISTS `yi_article` ( `id` int(11) unsigned NOT NULL ...
- python图像处理(1)图像的打开与保存
使用python进行图像处理时有三种库可以使用分别是:PIL.matplotlib.pyplot.opencv(opencv未接触) 注意:matplotlib读取进来的图片是unit8,0-255范 ...