Vuejs IF語句

Question

我有目前使用vue.js

我已經在V爲元件輸出從數據庫中的所有結果，在每個結果的側存在用於活性/去的按鈕頁-活性。每次點擊活動時，這會激發我vue.js中的一種方法，並更新狀態爲1的記錄。

我試圖根據狀態顯示相應的按鈕。

狀態= 1個顯示解除按鈕只有 狀態= 0顯示激活按鈕，僅

我的默認記錄值狀態爲0

這裏是我到目前爲止的代碼。

HTML：我Vue.js

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

方法文件

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>