04-Vue中v-for相关问题和设计一个简单的tab页面
2019-06-23 09:50
323 查看
原文链接:http://www.cnblogs.com/Romantic-Blood/p/11071905.html
在使用v-for的时候,可以传两个参数(val,index) in persons,第一个参数时值第二个是索引,在内容里调用{{val}}。
设计一个简单的tab页
template:`
<ul class="tab-title">
<li v-for="(val,index) in tabTitle" @click="cur2=index" :active="{active:cur2==index}">{{val}}</li>
</ul>
<div>
<div v-for="{val,index} in tabContent" v-if="cur2==index">{{val}}</div>
</div>`,
data(){
return{
cur2:0,
tabTitle:["标题一","标题二",'标题三"],
tabContent:["标题一","标题二",'标题三"]
}
}
首先v-for遍历出数组所有的li,再由v-on绑定click事件,将此时的index值传给cur2,再有v-bind绑定class控制active如果cur2==index为true就显示active的css。
下面的tabContent,同样先遍历出数组内的所有li,用v-if或者v-show来控制内容的显示与否,v-if=“cur2==index”,由于tabTitle把click点击的index传给了cur2,所以显示的是click点击的tabContent
转载于:https://www.cnblogs.com/Romantic-Blood/p/11071905.html
相关文章推荐
- 在设计页面时候要注意的一个问题。
- 一个简单好用的Android Tab 设计与实现
- 关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- 一个定时器相关的简单例子 - 回复 "Timer008" 的问题
- 使用vue的v-for与v-if遇到的一个问题
- easyui tabs 在同一个页面中打开多个tab多页面中变量名或函数名重复问题
- 使用Vue.js和Element-UI做一个简单的登录页面
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
- 设计一个自我介绍简单页面
- [ASP.NET 设计模式] 用Visual Studio2010搭建一个简单的WCF分层结构示例Step by Step —— 04 DataContract
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- [ASP.NET 设计模式] 用Visual Studio2010搭建一个简单的分层结构示例Step by Step —— 04 数据访问层
- 一个关于JSP页面生成相关表格的问题
- 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题
- Qt5.4.2实现一个简单的浏览器 及相关问题的解决
- 一个简单的Css实现的Tab页面
- vue计算属性时v-for处理数组时遇到的一个bug问题
- vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)