Vue实现选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="../js/vue.js"></script>
<style>
li{
list-style: none;
float: left;
margin-right: 20px; }
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
<div v-show="item.show">
{{item.title}}
</div>
</li>
</ul>
</div>
<script>
let obj=[
{"tab":"选项一","show":true,"title":"1111"},
{"tab":"选项二","show":false,"title":"2222"},
{"tab":"选项三","show":false,"title":"3333"}
]; var vm=new Vue({
el:".app",
data:{
list:obj
},
methods:{
tab:function(index){ for(var i=0;i<this.list.length;i++){
this.list[i].show=false;
if(i==index){
this.list[index].show=true;
}
}
}
}
})
</script>
</body>
</html>
Vue实现选项卡切换的更多相关文章
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- vue实现选项卡切换--不用ui库
vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
随机推荐
- IT经典书籍——Head First系列…
Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...
- 个人作业3——个人总结（Alpha阶段）
Deadline: 2017-5-15 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目个人总结内容 晚交 - 0分 迟交一周以上 - 倒扣本次作业分数 抄袭 - 倒扣本次 ...
- 团队作业4---第一次项目冲刺（ALpha）版本 第七天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.随着测试出现了大大小小的一些BUG,但是由于原来写的时候思维定 ...
- 如何让eclipse在程序修改后，点击运行可以自动保存。
preferences>run/debug>launching里面save required dirty editors before launching选always就自动保存咯选pro ...
- 201521123066 《Java程序设计》第三周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...
- 201521123027 《JAVA程序设计》第二周学习总结
1.本周学习总结 1.学习使用码云管理程序代码: 2.认识类型(整数.字节.浮点数.字符与布尔)与变量的使用: 3.学习运算符的基本使用以及类型转换的基本规则: 4.学习String类的一些使用方法: ...
- Myeclipse设置文件编码
设置选项分析: 1.window-->preferences-->General-->workspace-->Text file encoding 这里设置全局默认的文件编码格 ...
- 201521123117 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- Python的自学之路：Python基础（一）
声明:我写博客不是为了什么,只是为了记录自己的学习状态,学过的知识点!方便以后进行好的复习!python小白,勿喷 python环境的搭建,在这里就不细说了,这里有我的链接,可以参考一下:https: ...
- 02函数-04-箭头函数（ES6）
ES6新增的函数:Arrow Function,定义方式就是一个箭头 箭头函数相当于匿名函数,并且简化了函数定义,和匿名函数最大的区别在于其内部的this不再"乱跑",而是由上下文 ...