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>