Vue如何根据不同条件动态展示不同的按钮？

本文共计1120个文字，预计阅读时间需要5分钟。

我简单改写了您提供的内容，如下：

不多说，直接看代码吧！使用`template`和`slot-scope=scope`。`el-button`元素中，`v-if=scope.row.isDeleted===0`控制显示，点击时调用`lowerShelf(scope.row.id)`。按钮大小为`mini`，类型为`primary`，样式为`plain`。如果没有条件满足，则显示一个`mini`大小的按钮。

我就废话不多说了，大家还是直接看代码吧~

<template slot-scope="scope"> <el-button v-if="scope.row.isDeleted === 0" @click="lowerShelf(scope.row.id)" size="mini" type="primary" plain>下架</el-button> <el-button v-else size="mini" type="primary" plain>已下架</el-button> </template>

补充知识：vue 过滤器之根据不同的类型渲染不同的字段

本文旨在分享如何利用vue过滤器，实现简单、高效的对同一个字段不同的字段值，渲染出不同的内容。