Vue 选项卡
程序员文章站
2024-03-17 20:52:10
...
方式一
单独组件，切换的是不同的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
body{
background: #f4f4f4;
}
.box{width: 100%;height: 200px;background: #fff;}
</style>
</head>
<body>
<header id='head' class="" style="padding-right: 15px;">
<p class="borderbe0 lh30 ">动态组件</p>
<button @click="handleChangeView('a1')">李白A</button>
<button @click="handleChangeView('b1')">鲁班七号B</button>
<div class="box">
<components :is="currentTabComponent"></components>
</div>
</header>
<script>
new Vue({
el:'#head',
data:{
currentTabComponent:'a1'
},
created:function(){
},
methods:{
handleChangeView:function(res){
this.currentTabComponent=res
}
},
components:{
a1:{
template:'<div>你好 靓仔 我拿buff</div>'
},
b1:{
template:'<div>hi 蓝天白云 我要开始送了</div>'
}
}
})
</script>
</body>
</html>
方式二
只有一个组件，切换不同的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
body{
background: #f4f4f4;
}
.flex{display: flex;}
.flex1{flex:1;}
.justsa{justify-content: space-around}
.alic{align-items: center}
.borderbe0{border-bottom:1px solid #e0e0e0; }
.fz16{font-size: 16px;}
.lh50{line-height: 50px;}
.ml20{margin-left: 20px;}
.ml10{margin-left: 10px;}
.mr20{margin-right: 20px;}
.borBox{box-sizing: border-box;}
.img{width: 30px;height: 30px;}
.colord5{color: #d50000;}
</style>
</head>
<body>
<header id='head' class="" style="padding-right: 15px;">
<div class="flex justsa alic lh60">
<div class="fz16" @click="select(1)" :class="active==1?'colord5':''">审核中</div>
<div class="fz16" @click="select(2)" :class="active==2?'colord5':''">已审核</div>
<div class="fz16" @click="select(3)" :class="active==3?'colord5':''">全部</div>
</div>
<div class="bordertc3 borderbc3 borBox bgf" style="margin-bottom: 1rem;">
<list v-for='item in lists' :item='item'></list>
</div>
</header>
<script>
new Vue({
el:'#head',
data(){
return {
lists:[{name:'江苏省',type:'李白'},{name:'江苏省',type:'阿克'},{name:'江苏省',type:'韩雪'},{name:'江苏省南京',type:'小香香'}],
active:1
}
},
created(){
},
methods:{
select(res){
this.active = res
switch(res){
case 1:
this.lists = [{name:'湖北省',type:'橘右京'},{name:'湖北省',type:'蜜月'}]
break;
case 2:
this.lists = [{name:'白马寺',type:'凯'},{name:'白马寺',type:'鲁班七号'}]
break;
case 3:
this.lists = [{name:'南华大学',type:'百里'},{name:'南华大学',type:'花蜜了'}]
break;
}
},
},
components:{
'list':{
props:['item'],
methods:{
goDetail(id){
//window.location.href='logistics-detail.html?id='+id
}
},
template:
`
<div class='flex alic borderbe0 fz16 lh50 ml20 borBox' @click='goDetail(item.type)'>
<div class="title mr20 flex1">{{item.name}}</div>
<div class='flex alic'>
<div class="borBox lh50 fz16 border0 color6">{{item.type}}</div>
<img src="https://upload.chinaz.com/2018/0611/201806111628305493.jpg" class="img mr20 ml10"/>
</div>
</div>
`
}
}
})
</script>
</body>
</html>
王者篇：最近一手公孙离，秀的不敢拿出手，怕误伤自己人
上一篇： 如何判断一个对象是否可以被回收？
下一篇： c++中的多态机制——运算符重载