slider 单个动态显示 marks label

<!-- 
    如果是循环使用el-slider，那么就就需要将data中的marks，放到循环数据当中，将marks的数据源独立出来，不可以独立使用
 -->

<template>
    <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
        <el-slider style="width: 80%" v-model="value1" :marks.sync="marks" @input="getInfo" show-input></el-slider>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: 0,
                marks: {
                    0: '不及格',
                    60: '及格',
                    80: '良好',
                    90: '优秀',
                }
            }
        },
        methods: {
            getInfo(v) {
                let d = {}
                if (v >= 0 && v < 60) {
                    d = {
                        0: {
                            label: '不及格',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        60: '及格',
                        80: '良好',
                        90: '优秀',
                    }
                } else if (v >= 60 && v < 80) {
                    d = {
                        0: '不及格',
                        60: {
                            label: '及格',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        80: '良好',
                        90: '优秀',
                    }
                } else if (v >= 80 && v < 90) {
                    d = {
                        0: '不及格',
                        60: '及格',
                        80: {
                            label: '良好',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        90: '优秀',
                    }
                } else if (v >= 90 && v <= 100) {
                    d = {
                        0: '不及格',
                        60: '及格',
                        80: '良好',
                        90: {
                            label: '优秀',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                    }
                }
                this.$set(this.marks, [0], d[0])
                this.$set(this.marks, [60], d[60])
                this.$set(this.marks, [80], d[80])
                this.$set(this.marks, [90], d[90])
            }
        }
    }
</script>