利用 Vue 内联样式的绑定方法，实现按钮的显示与隐藏

小半 • 2022年12月30日下午3:09 • 前端开发 • 阅读 192

<template>
<div>

  <div class="titles">
    <div style="display: flex;">

      <div class="btn-box-content">
        <div class="btn-status">
          <el-radio-group v-model="workFlowStatus" class="btn" @change="changeStatus">
            <el-radio-button label="todo">未毕业</el-radio-button>
            <el-radio-button label="done">已毕业</el-radio-button>
            <el-radio-button label="">全部</el-radio-button>
          </el-radio-group>
        </div>
      </div>

    </div>


  </div>

  <div style="display: flex; align-items: center;">
    <div style="display: flex; margin-left: 15px;" >
      <el-button type="default" size="middle" @click="unApply()" :style="{ display: active1 }">解除学籍</el-button>
      <el-button type="default" size="middle" @click="Apply()" :style="{ display: active2 }">恢复学籍</el-button>
    </div>
  </div>

</div>

</template>

<script>
  export default {
    data () {
      return {
        workFlowStatus: 'todo',
        active1: '',
        active2: 'none'
      }
    },
    methods: {
      // 根据状态隐藏按钮
      changeStatus () {
        if (this.workFlowStatus === 'todo') {
          this.active1 = ''
          this.active2 = 'none'
        } else if (this.workFlowStatus === 'done') {
          this.active1 = 'none'
          this.active2 = ''
        } else {
          this.active1 = 'none'
          this.active2 = 'none'
        }
      }
    }
  }
</script>

<style scope>

  .titles {
    display: flex;
    padding-bottom: 6px;
    clear: both;
    font-size: 11px;
    background-color: rgb(236, 246, 253);
    border: 1px solid rgb(210, 234, 251);
    justify-content: space-between;
    padding: 14px;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .footer{
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #d9d9d9;
    width: 100%;
  }
  
</style>

效果如下图所示，点击未毕业时出现解除学籍按钮，点击已毕业时出现恢复学籍按钮，点击全部时，隐藏所有按钮