Vuejs IF Statement

I have a page which currently uses vue.js

I have outputted in a v-for element all the results from the database, at the side of each result there is a button for active / de-active. Every time active is clicked this fires a method within my vue.js and updates the record with status of 1.

I'm trying to get the results to show the corresponding button depending on status.

Status = 1 Show Deactivate button only Status = 0 Show Activate button only

my default record value for status is 0

Here's my code so far.

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>

Method on my Vue.js file

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

Just use 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>