Vue.js中的條件邏輯

Question

有沒有任何方法將條件邏輯添加到Vue.js中的字符串模板？這是我嘗試編譯失敗。

<div v-for="foo in foos"> 
    {{#if foo.bar === 1}} 
     {{foo.name}} 
    {{/if}} 
</div> 

Answer 1

您必須使用v-if指令。

V-如果是「真正的」有條件的渲染，因爲它確保事件 聽衆和條件塊內的子組件是 妥善銷燬和切換過程中重新創建。

<div v-for="foo in foos" v-if="foo.bar===1"> 
    {{foo.name}} 
</div> 

瞭解更多關於這個documentation。

var demo = new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
     items:[{ 
 
     id:1, 
 
     message:'message1' 
 
    \t },{ 
 
     id:2, 
 
     message:'message2' 
 
    }] 
 
    } 
 
})

<script src="https://vuejs.org/js/vue.min.js"></script> 
 
<div id="demo"> 
 
    <div v-for="item in items" v-if="item.id==1"> 
 
    {{item.message}} 
 
    </div> 
 
</div>

此外，您還可以使用computed方法。參見參考here。

var demo = new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
     items:[{ 
 
     id:1, 
 
     message:'message1' 
 
    \t },{ 
 
     id:2, 
 
     message:'message2' 
 
    }] 
 
    }, 
 
    computed: { 
 
     myMethod: function() { 
 
     return this.items.filter(function (item) { 
 
      return item.id === 1 
 
     }) 
 
    } 
 
} 
 
})

<script src="https://vuejs.org/js/vue.min.js"></script> 
 
<div id="demo"> 
 
    <div v-for="item in myMethod"> 
 
     {{item.message}} 
 
    </div> 
 
</div>