Vue el-button根据条件显示与隐藏

最新推荐文章于 2025-06-05 16:10:11 发布

原创最新推荐文章于 2025-06-05 16:10:11 发布 · 1.1w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了一种根据变量条件改变按钮显示状态及文本的方法。通过使用`:style`属性控制按钮的显示与隐藏，并根据`scope.row.deleted`的值动态切换按钮文本为“冻结”或“解除冻结”。这种方式能够有效实现按钮的状态管理。

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

         <el-button

           size="mini"

           type="text"

           icon="el-icon-delete"

           @click="handleDelete(scope.row)"

           :style="{ display: scope.row.deleted==1?'none':'' }"

         >   {{ scope.row.deleted == 0 ? '冻结' : '解除冻结' }}     </el-button>