vue小demo之tab选项卡切换
2018-03-28 17:07
846 查看
每天学习一点vue,感觉自己还是很鸡肋,要多看看网上的小实例,多练习,会熟练,加油!
今天在网上学习了一个tab选项卡的切换,比较简单容易理解。看了一下就可以基本上自己打出来了,多做做这些简单的,不光信心大增,还是一种循序渐进。
本人比较懒,直接用了bootstrap的样式。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
<a class="btn" @click="clickId=0" :class="{'btn-primary':clickId==0}">css</a>
<a class="btn" @click="clickId=1" :class="{'btn-primary':clickId==1}">html</a>
<a class="btn" @click="clickId=2" :class="{'btn-primary':clickId==2}">js</a>
<a class="btn" @click="clickId=3" :class="{'btn-primary':clickId==3}">jquery</a>
<div>
<div v-show="clickId==0">css</div>
<div v-show="clickId==1">html</div>
<div v-show="clickId==2">js</div>
<div v-show="clickId==3">jquery</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/tab.js"></script>
</body>
</html>
js
var app = new Vue({
el: '#app',
data:{
clickId:0
}
})
之后去肝实例的时候,发现了一个包含for循环的tab选项卡切换。感觉更符合实际项目,特此码来做比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
<a class="btn" v-for="item in items" @click="makeActive(item)" :class="{'btn-primary':item.statues}">{{item.name}}</a>
<div>
<p v-for="item in items" v-show="item.statues==true">{{item.name}}</p>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/tab2.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data:{
statues:'html',
items:[
{
name:'html',
statues:true,
},
{
name:'css',
statues:false,
},
{
name:'js',
statues:false,
},
{
name:'jquery',
statues:false,
},
]
},
methods:{
makeActive:function(item){
this.statues=item.name;
for (var i =0 ;i<this.items.length;i++) {
this.items[i].statues=false;
}
item.statues=true;
}
}
})
参考的例子是传了一个index的值,不知道怎么滴,怎么传index都会出错,干脆不传了,然后一点毛病也没有。郁闷郁闷。
今天在网上学习了一个tab选项卡的切换,比较简单容易理解。看了一下就可以基本上自己打出来了,多做做这些简单的,不光信心大增,还是一种循序渐进。
本人比较懒,直接用了bootstrap的样式。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
<a class="btn" @click="clickId=0" :class="{'btn-primary':clickId==0}">css</a>
<a class="btn" @click="clickId=1" :class="{'btn-primary':clickId==1}">html</a>
<a class="btn" @click="clickId=2" :class="{'btn-primary':clickId==2}">js</a>
<a class="btn" @click="clickId=3" :class="{'btn-primary':clickId==3}">jquery</a>
<div>
<div v-show="clickId==0">css</div>
<div v-show="clickId==1">html</div>
<div v-show="clickId==2">js</div>
<div v-show="clickId==3">jquery</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/tab.js"></script>
</body>
</html>
js
var app = new Vue({
el: '#app',
data:{
clickId:0
}
})
之后去肝实例的时候,发现了一个包含for循环的tab选项卡切换。感觉更符合实际项目,特此码来做比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
<a class="btn" v-for="item in items" @click="makeActive(item)" :class="{'btn-primary':item.statues}">{{item.name}}</a>
<div>
<p v-for="item in items" v-show="item.statues==true">{{item.name}}</p>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/tab2.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data:{
statues:'html',
items:[
{
name:'html',
statues:true,
},
{
name:'css',
statues:false,
},
{
name:'js',
statues:false,
},
{
name:'jquery',
statues:false,
},
]
},
methods:{
makeActive:function(item){
this.statues=item.name;
for (var i =0 ;i<this.items.length;i++) {
this.items[i].statues=false;
}
item.statues=true;
}
}
})
参考的例子是传了一个index的值,不知道怎么滴,怎么传index都会出错,干脆不传了,然后一点毛病也没有。郁闷郁闷。
相关文章推荐
- 鼠标滑过TAB选项卡切换demo 可拓展
- Vue.js tab实现选项卡切换
- Vue.js组件tab实现选项卡切换
- jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
- 使用选项卡TabWidget与TabHost实现底部或者顶部四个分类按钮 点击切换对应的fragment
- jQuery实现TAB选项卡切换特效简单演示
- vue中用动态组件实现选项卡切换效果
- web实战(三)— — Tab选项卡切换效果
- jQuery+css3实现的超酷圆角tab选项卡切换效果
- 详解使用vue实现tab 切换操作
- JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
- 微信小程序滚动Tab选项卡:左右可滑动切换
- jQuery简单实现tab选项卡切换效果
- 转载 37个Ajax和CSS实现的Tab选项卡切换效果界面
- js实现tab选项卡切换功能
- Android多个TAB选项卡切换效果
- 选项卡自动切换(定时器demo)
- Tab选项卡切换效果,mooc教程
- Tab选项卡切换
- 原生js实现tab选项卡切换