Vue.js: 템플릿에서 논리 연산자를 사용하는 방법

Vue.js: 템플릿에서 논리 연산자를 사용하는 방법

단순히 2가지 다른 것을 사용하고 싶다.v-if다음과 같이 같은 div로 변환합니다.

사실 난 다음 코드가 있어

<div class="o-overlay" v-if="show">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

v-if를 하나만 포함합니다.

예를 들어 다음과 같이 동일한 조건 내에 있는 경우 2개 이상의 v-를 사용합니다.

<div class="o-overlay" v-if="show" v-if="visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

하지만 많은 오류가 발생하여 올바른 사용법을 배우고 싶을 뿐입니다.잘 부탁드립니다:)

같이 쓰실 수 있습니다.v-if예를 들어, 지시문.

&&= 논리 연산자AND

||= 논리 연산자OR

&&즉, 두 조건이 모두 참이어야 div가 표시됩니다.

<div class="o-overlay" v-if="show && visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

||즉, div가 나타내려면 조건 중 하나만 참이어야 합니다.

<div class="o-overlay" v-if="show || visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

언급URL : https://stackoverflow.com/questions/54076874/vue-js-how-to-use-the-logical-operators-in-a-template