vue에서 v-if를 사용하는 방법
- WBOY원래의
- 2022-03-17 11:08:3652373검색
vue에서 "v-if"는 true 또는 false 표현식을 기반으로 DOM 요소를 작동하는 데 사용됩니다. 표현식의 값이 true이면 요소가 dom 트리에 존재합니다. 이고 표현식은 false인 경우 요소가 DOM 트리에서 제거되고 구문은 "v-if="expression""입니다.
이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.
vue에서 v-if 사용
v-if: 참 또는 거짓 표현(DOM 요소 운영)에 따라 요소(DOM 요소 운영) 표시 및 숨기기 전환
(1) v- if application
<div id="app">
<h2 v-if="true">{{message}}</h2>
</div>데이터는 true일 때만 표시됩니다
(2) v-if 및 v-else
<div id="app">
<h2 v-if="false">{{message}}</h2>
<h1 v-else>hello</h1>
</div>v-if가 true이면 실행, 그렇지 않으면 else 실행
( 3) 사례: v - if 및 v-else 적용
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>유형을 전환하려면 클릭하여 표시 내용을 전환하세요. 이때 입력 태그 재사용 문제가 발생합니다(입력 상자의 내용은 표시되지 않음). 전환 후 변경됩니다. 가능한 한 새 요소를 만드는 대신 기존 요소를 재사용하면 성능이 향상될 수 있습니다. 키가 동일하면 내용이 유지됩니다. , 콘텐츠가 유지되지 않습니다. [관련 권장사항: "
vue .js tutorial위 내용은 vue에서 v-if를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：vue에서 v-for의 사용법은 무엇입니까다음 기사：vue에서 v-for의 사용법은 무엇입니까