點擊切換背景色,同時切換組件,一套完整的代碼示例。喜歡的小夥伴點個贊
<template>
<div>
<div class="bottom">
// 使用element 中的card 生成卡片
<el-card class="box-card">
<div>
<h4>導入數據</h4>
<span>請將這些文件進行分類</span>
</div>
<div class="tab">
//使用 elenemt柵格化系統
<el-row :gutter="20">
<el-col :span="8" v-for="(item,index) in list" :key="index">
//通過判斷class切換顏色 最核心代碼
<p @click='app(item)' :class="{ red:changeRed == item.id}">{{item.name}}</p>
</el-col>
</el-row>
<div :is= "currentView" ></div>
</div>
</el-card>
</div>
</div>
</template>
<script>
//引入組件
import usb from "@/views/inc/usb.vue"
import newdata from "@/views/inc/new.vue"
import dele from "@/views/inc/delete.vue"
export default {
components:{
usb,
newdata,
dele,
},
data(){
return{
list:[
{id:1,name:'全部數據',info:'usb'},
{id:2,name:'新數據',info:'newdata'},
{id:3,name:'刪除',info:'dele'},
],
// 默認背景色
changeRed:1,
// 切換組件
usb:'usb',
newdata:'newdata',
dele:'dele',
currentView:'usb',
}
},
methods: {
//點擊切換組件
app(item){
this.currentView = item.info;
this.changeRed = item.id
}
}
}
</script>
<style lang="scss" scoped>
i{
font-style: normal;
font-size: 12px;
}
// 切換背景
.red{
background: blue;
}
// 頭部內容
.top{
padding-top:1rem;
width: 12rem;
height: 12rem;
margin:0 auto;
text-align: center;
p{
span{
display: block;
}
}
.box-card{
height: 12rem;
}
}
// 中部內容
.con{
padding-top:1rem;
width: 90%;
margin: 0 auto;
}
// 底部內容
.bottom{
padding-top:1rem;
width: 90%;
margin: 0 auto;
}
</style>