#vue# 使用JS进行状态判断,并追加类名样式
需求:在很多情况下,我们需要做切换状态就会显示不同的样式
效果:例如像下面的图(按钮)一样,不同的状态下,方框里显示不同的背景颜色
思路:(1)首先我们需要进行排版,排出一个按钮的样式,再写出3个背景颜色的样式
(2)通过接入数据接口,以及追加样式
(3)再写Js函数方法
<template>
<button class="live-state"
:class="liveBackClass(item.live_status)" >
//item.live_status是数据接口数据来的
//绑定一个函数方法,然后将拿到的状态码,进行传入
{{ item.live_status | getStatusText }}
</button>
</template>
<script>
import { liveList,recordList, recordShow } from '@/model/teacher/index';
import backplayItem from '@/components/backplay-item/index'
const eduModal = () => import('@/components/edu-modal/index')
import _ from '@/assets/js/utils'
export default {
name: "index",
components: {
backplayItem,
eduModal
},
data () {
},
methods:{
liveBackClass(status) {
switch (status) {
case 1: // case就是后端数据里面,对于status状态的区分
return "live-state-no-start"; // 这个就是传入状态以后,追加的样式
case 2:
return "live-state-ing";
case 3:
return "live-state-end";
}
}
},
}
}
</script>
<style>
.live-state { //先写出一个公共的样式,不要写背景颜色
width: .56rem;
height: .24rem;
border-radius: 5px;
line-height: .24rem;
font-size: 14px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #FFFFFF;
margin-top: 12px;
margin-left: 20px;
}
//下面三个是追加的样式
.live-state-no-start{
background-color: #797979;
}
.live-state-ing{
@extend .edu-active-bg-color;
}
.live-state-end{
background-color: #979797;
}
</style>