<!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的更多相关文章

  1. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  2. react构建淘票票webapp，及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  3. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  4. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  5. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  6. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  7. vue实现简单在线聊天

    vue实现简单在线聊天 引用mui的ui库,ES6的 fetch做网络请求 //html <!DOCTYPE html> <html> <head> <met ...

  8. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

随机推荐

  1. Redis之Zset

    一.Redis之Zset简介 1. 有序集合Zset是String类型的有序集合. 2. Zset中每个元素都会关联一个double类型的分数值,redis通过分数值来为集合中所有成员进行从小到大排序 ...

  2. MySQL多数据源笔记1-MySQL主从复制

    1.为什么要做主从复制? 1.在业务复杂的系统中,有这么一个情景,有一句sql语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务,使用主从复制,让主库负责写,从库负责读,这样,即使主库出 ...

  3. 2018 年 3 月 iOS架构师 面试总结

    序言: 今年2月中下旬因为个人原因,换了一份工作,3月初期间面试了有3,4家,基本都是D轮或者刚刚上市的公司,也有上榜的BAT,也从他们的面试笔试中看到了自己的一些不足,于是就想写出来和大家分享一下, ...

  4. Mybatis动态SQL单一基础类型参数用if标签

    Mybatis动态SQL单一基础类型参数用if标签时,test中应该用 _parameter,如: 1 2 3 4 5 6 <select id="selectByName" ...

  5. PAT乙级-1070. 结绳(25)

    给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟另一段绳子串连.每次串连后,原来两段绳子的长度 ...

  6. Python函数学习——递归

    递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 函数实现过程 def calc(n): v = int(n//2) print(v) if v > ...

  7. 使用CoreRT将.NET Core发布为Native应用程序

    在上一篇文章<使用.NET Core快速开发一个较正规的命令行应用程序>中我们看到了使用自包含方式发布的.NET Core应用中包含了216个文件.我就写一个cat命令用得着这么动真格.. ...

  8. 最大堆(Java数组实现)

    最大堆 data[1]开始存,data[0]空着不用.也可以把data[0]当成size来用. public class MaxHeap<T extends Comparable<? su ...

  9. 为什么会有可恶的腾讯电脑管家&怎么干掉它-电脑开机出现腾讯电脑管家-无法卸载腾讯电脑管家

    为什么会有可恶的腾讯电脑管家 怎么干掉它 电脑开机出现腾讯电脑管家 无法卸载腾讯电脑管家 某天,趁空闲,升级了一些常用软件,其中就升了新版电脑qq,晚上玩完电脑后关机睡觉,第二天早上开机.出现了图一: ...

  10. SpringBoot中MongoDB注解概念及使用

    spring-data-mongodb主要有以下注解 @Id 主键,不可重复,自带索引,可以在定义的列名上标注,需要自己生成并维护不重复的约束.如果自己不设置@Id主键,mongo会自动生成一个唯一主 ...