Question

有没有办法在Vue.js中为条件模板添加条件逻辑？这是我尝试过但编译失败的原因。

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

Answer 1

您必须使用v-if指令。

v-if是“真正的”条件渲染，因为它确保了该事件条件块内的侦听器和子组件是在切换期间正确销毁并重新创建。

<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'
  	},{
      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'
  	},{
      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>

Vue.js中的条件逻辑

1 个答案: