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>