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>