<template>
<div>
<div class="nav">
<div class="assets " v-for="(item,index) in components" :key="index" :id="item.id"
:class="{ active:changeColor == index}" @click="change(index,$event)">
{{item.value}}
</div>
<p style="font-size: 23px;float: left;margin-left: 200px;">
科目初期
</p>
<button class="trialBalance">试算平衡</button>
<button class="addition">新增</button>
</div>
<component :is="currentView"></component>
</div>
</template>
<script>
import cost from './child/cost';
import interests from './child/interests';
import liabilities from './child/liabilities';
import loss from './child/loss';
import assets from './child/assets';
export default {
components: {
cost,
interests,
liabilities,
loss,
assets
},
created(){
},
data(){
return{
changeColor:0,
currentView : 'assets',
components:[
{
"id" : "assets",
"value" : "资产",
"class" : "aa"
},{
"id" : "cost",
"value" : "成本"
},{
"id" : "liabilities",
"value" : "负债"
},{
"id" : "interests",
"value" : "权益"
},
{
"id" : 'loss',
"value" : '损益'
}
]
}
},
props : ["data"],
methods:{
change(index,event){
this.changeColor = index;
console.log(event);
this.currentView=event.path[0].id;
}
},
}
</script>
<style scoped>
button{
outline: none;
cursor: pointer;
border:none;
}
.nav{
overflow:hidden;
}
.active{
background: #25aff6;
color:#fff;
}
.assets,.liabilities,.cost,.interests,.loss{
margin-right: 10px;
float:left;
height:30px;
line-height: 30px;
text-align: center;
width:80px;
border-radius: 10px;
border: 1px solid #c9cccd;
}
.nav>div:hover{
cursor: pointer;
}
.addition{
float:right;
color:#fff;
text-align:center;
background:#ff9872;
height:34px;
line-height:34px;
width:96px;
border-radius: 10px;
}
.trialBalance{
float:right;
color:#fff;
text-align:center;
background:#5eeaa8;
height:34px;
line-height:34px;
width:96px;
border-radius: 10px;
margin-left:17px;
}
</style>
vue 组件切换
猜你喜欢
转载自blog.csdn.net/szw_18583757301/article/details/81126529
今日推荐
周排行