vue不使用v-if与v-show的情况下显隐标签

最新推荐文章于 2024-01-11 10:03:24 发布

Cai_007

最新推荐文章于 2024-01-11 10:03:24 发布

阅读量435

点赞数 1

分类专栏： vue 前端文章标签： vue.js node.js javascript css

原文链接：https://blog.youkuaiyun.com/hongwei15732623364/article/details/96139618

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍了一个使用Element UI实现的按钮显示与隐藏的逻辑案例。根据不同的条件动态控制按钮的可见性，包括取消、发布、保存及下线等操作。通过data属性控制按钮的显示与隐藏，适用于多种业务场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现代码如下

定义按钮

<el-button @click="visible = false" :style="{ display: visibleCancel }">取消</el-button>
<el-button type="primary" @click="dataPublish()" :style="{ display: visiblePublish }">发布</el-button>
<el-button type="primary" @click="dataFormSubmit()" :style="{ display: visibleSubmit }">保存</el-button>
<el-button type="primary" @click="handleStatus()" :style="{ display: visibleLine }">下线</el-button>

定义显示状态

data () {
 return {
   visibleCancel: '',   //显示
   visiblePublish: '',   //显示
   visibleSubmit: '',   //显示
   visibleLine: 'none'  //隐藏
   }
}

初始化init状态：

init (id,state,flag) {
   this.dataForm.id = id || 0
   //如果点详情
   if (flag === 1) {
     this.disable = true
     //如果已发布状态，显示按钮：下线
     if (state === 1) {
       this.visiblePublish = 'none'
       this.visibleSubmit = 'none'
       this.visibleLine = ''
       this.visibleCancel = 'none'
     }else {
       this.visiblePublish = 'none'
       this.visibleSubmit = 'none'
       this.visibleLine = 'none'
       this.visibleCancel = 'none'
     }
   }
}