vue的简单tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab</title>
</head>
<body>
<div id="app">
<div class="left">
<ul>
<li v-for="(item,index) in list" v-on:click="change(index)">{{item}}</li>
</ul>
</div>
<div class="top">
<ul v-show="show1">
<li v-for="(text,index) in list2"><a href="javascript:;" @click='tabToggle(text);'>{{text}}</a></li>
</ul>
<ul v-show="show2">
<li v-for="(text,index) in list3"><a href="javascript:;" @click='tabToggle(text);'>{{text}}</a></li>
</ul>
</div>
<div class="bottom">
{{texts}}
</div>
</div>
<script type="text/javascript" src='js/vue.js'></script>
<script>
var list=['男装','女装']
var list2=['西装','领带','剃须刀']
var list3=['内衣','上衣','化妆品']
var texts=""
var app = new Vue({
el: '#app',
data: {
currentView: 'tab01',
texts:texts,
list:list,
list2:list2,
list3:list3,
show1:true,
show2:false
},
methods: {
tabToggle: function(tabText) {
this.texts=tabText
// console.log(tabText);
},
change(index){
if(index==0){
this.show1=true
this.show2=false
}
if(index==1){
this.show1=false
this.show2=true
}
}
}
})
</script>
</body>
<style type="text/css">
* {
padding: 0;
margin: 0
}
#app {
width: 500px;
height: 300px;
margin: 0 auto;
background-color: #54b228;
}
ul{
list-style: none;
}
.left {
float: left;
height: 100%;
width: 20%;
background: #9a3;
text-align: center;
}
.left ul li{
margin: 0;
width: 100%;
height: 30px;
line-height: 30px;
border: none;
background: #527db5;
cursor: pointer;
color: #fff;
}
.left ul li:hover{
background: #89F572;
}
.top {
height: 50px;
line-height: 50px;
width: 100%;
background-color: #904229;
}
.top ul li{
display: inline-block;
margin: 0 10px;
}
.top ul li a {
text-decoration: none;
color: #fff;
}
.top ul li a:hover {
text-decoration: none;
color: #89f572;
}
.bottom {}
</style>
</html>
效果如图
vue的简单tab的更多相关文章
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- react构建淘票票webapp，及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- vue实现简单在线聊天
vue实现简单在线聊天 引用mui的ui库,ES6的 fetch做网络请求 //html <!DOCTYPE html> <html> <head> <met ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
随机推荐
- A Dream (PKUWC 2018)
A Dream (PKUWC 2018) 这是一个梦. 从没有几分节日气氛的圣诞,做到了大雪纷飞的数九寒天. 忘了罢! 不记得时间,不记得地点.随着记忆的褪去,一切也只会不复存在. Day-34? D ...
- Bzoj1901 Dynamic Ranking
动态区间第k小 离散化后 那么每个点开一棵线段树(主席树)再套一个树状数组在外面 每次询问区间内的树的个数时 相当于进行了一次树状数组求区间和的操作,只是是把树状数组那个点看做主席树,对log棵主席树 ...
- CentOS7下安装MySQL的安装与配置（yum） （转）
原文链接:http://www.centoscn.com/mysql/2016/0626/7537.html 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mys ...
- window.close(); 关闭浏览器窗口js代码
序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...
- 初读 c# IL中间语言
对一段c#编写的代码,有一些疑问,想通过IL中间语言看看,编译后是怎么处理的.代码如下: static StringBuilder sb = new StringBuilder(); ; ; /// ...
- c#多线程同步之EventWaitHandle再次使用
/// <summary> /// 文件传输器,用来获取全文文件,自动根据全文文件数量,开启一定数量的线程,采用生产者消费模式 /// </summary> public cl ...
- 接触vsto，开发word插件的利器
研究word插件有一段时间了,现在该是总结的时候了. 首先咱们来了解下什么是vsto?所谓vsto,就是vs面向office提供的一个开发平台.一个开发平台至少包含两个要素:开发工具(sdk)和运行环 ...
- 33.Django ModelForm
ModelForm 1.ModeForm简单验证 from django.db import models # Create your models here. class UserInfo(mode ...
- Thinking in Java 第二章学习笔记
Java虽基于C++,但相比之下,Java是一种更加纯粹的面向对象程序设计语言. 在Java的世界里,几乎一切都是对象,而Java中的全部工作则是定义类,产生那些类的对象,以及发送消息给这些对象. 尽 ...
- Appserv(Apache) 配置ssl证书
一:打开httpd.conf文件,移除注释的行: Include conf/extra/httpd-ahssl.conf LoadModule ssl_module modules/mod_ssl.s ...