前端开发动态控制ui框架的class类名（elementUI上传组件限制数量后去掉上传按钮）

动态控制ui框架的class类名

给需要控制的类名嵌套类名

elementUI 上传组件示例代码

<el-upload
  :class="{uploadDemo:isHide}" //动态控制类名的关键isHide
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :on-remove="handleRemove" //删除时的钩子
  :on-change="handleChange" //上传的文件变化时的钩子
  :limit="3" //限制上传数量为3
>
  <template v-slot:tip>
    <div class="el-upload__tip">文件不超过3个</div>
  </template>
</el-upload>
<script>
  import { reactive, toRefs, getCurrentInstance } from 'vue'
  export default {
  data() {
      return {
        isHide: false,
        fileList: []
      };
    },
    methods: {
    // 在以下两个钩子函数中控制isHide变量
    //文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
        if(fileList.length < 3) {
        	this.isHide = false
        } else {
        	this.isHide = true
        }
      },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      handleChange(file, fileList) {
        console.log(file, fileList);
        if(fileList.length < 3) {
        	this.isHide = false
        } else {
        	this.isHide = true
        }
      },
    }
  }
</script>
//通过样式控制上传按钮的隐藏
<style>
.uploadDemo .el-upload--picture-card {
 	display: none;
}
</style>