소개

안녕하세요! 마츠모토 유다이(마츠모토 유다이)라고 합니다!
이번에는 조건 분기 v-if에 대해 출력합니다!

V-if란?

조건 분기 v-if를 사용하여 요소로 표시/숨기기를 전환할 수 있습니다.

쓰기

기본적인 쓰는 방법은 다음과 같습니다.

HTML

    <div id ="app">
       <p v-if="toggle">
          Good morning!
       </p>
    </div>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
      toggle: true,
    }

속성 toggle (선택 사항)를 정의하고 true 값 true or false를 작성합니다.
(true이면 표시, false이면 숨겨집니다.)
그런 다음 p要素 에 vーif 지시문을 설정하고 값에 toggle 속성을 지정합니다.
위는 toggle:true로 지정되어 있으므로 Good morning!가 표시됩니다.

※v-if에서는 표시/비표시가. 자주 표시/숨기기를 반복하려면 display:none 지시문을 사용하는 것이 좋습니다. (다른 기사에서 해설합니다)

요약

· 요소에 v-if = "속성"을 지정.
・data:{프로퍼티:진위치}를 설치.

속성은 선택 사항입니다!

마지막으로

이번에는 v-if에 대해 출력했습니다.
만약 인식의 방법이 잘못되어 있으면, 코멘트등 받을 수 있으면 다행입니다.

앞으로도 Qiita에서 출력하겠습니다!