Vuejs IF 语句

Question

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

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

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

状态 = 1 仅显示停用按钮状态 = 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')
    },

Answer 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>

Answer 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>

Vuejs IF 语句

Vuejs IF statement

javascript

jquery

laravel

vue.js