Vuejs IF 语句

Posted 2023-03-14

【中文标题】Vuejs IF 语句

【英文标题】：Vuejs IF statement

【发布时间】：2016-03-27 14:12:20

【问题描述】：

我有一个当前使用 vue.js 的页面

我已经在一个 v-for 元素中输出了数据库中的所有结果，在每个结果的旁边都有一个用于激活/停用的按钮。每次点击 active 时，都会触发我的 vue.js 中的一个方法，并更新状态为 1 的记录。

我正在尝试让结果根据状态显示相应的按钮。

Status = 1 仅显示停用按钮 Status = 0 仅显示激活按钮

我的状态默认记录值为 0

这是我目前的代码。

html：

<div class="col-xs-3" v-for="record in records">
                        <div class="user-view">
                            <div class="image">
                                <img src=" url() @record.photo">
                                    <p>@record.name</p>
                                    <button class="btn btn-block" @click="ActivateRecord(record.id)">Activate</button>
                                    <button class="btn btn-block">Deactivate</button>
                                </div>
                        </div>
                    </div>

我的 Vue.js 文件上的方法

ActivateRecord: function(id)
      this.$http.post('/api/record/' + id + '/activate')
    ,

【参考方案1】：

只需使用v-if (http://vuejs.org/api/#v-if)：

                <div class="col-xs-3" v-for="record in records">
                    <div class="user-view">
                        <div class="image">
                            <img src=" url() @record.photo">
                            <p>@record.name</p>
                            <button class="btn ban-block" v-if="record.status == 0" @click="ActivateRecord(record.id)">Activate</button>
                            <button class="btn ban-block" v-if="record.status == 1">Deactivate</button>
                        </div>
                    </div>
                </div>

【讨论】：

感谢您的款待！只是出于兴趣，您不知道是否有一种利用块方法的方法吗？我在 中输出结果，您可以想象在 4 个结果之后格式不正确。

【参考方案2】：

您可以使用v-if 和v-else 指令[ref]：

<div class="col-xs-3" v-for="record in records">
    <div class="user-view">
        <div class="image">
            <img src=" url() @record.photo">
            <p>@record.name</p>
            <button class="btn ban-block" v-if="record.status">Deactivate</button>
            <button class="btn ban-block" v-else @click="ActivateRecord(record.id)">Activate</button>
        </div>
    </div>
</div>