>  기사  >  웹 프론트엔드  >  Vue에서 요소를 숨기는 방법

Vue에서 요소를 숨기는 방법

青灯夜游
青灯夜游원래의
2021-10-27 14:57:3915820검색

vue에서 요소를 숨기는 방법: 1. DOM 트리에 DOM 요소를 동적으로 추가하거나 삭제하여 요소를 표시하거나 숨기려면 "v-if" 명령을 사용합니다. 2. "v-show" 명령을 사용하여 디스플레이를 설정합니다. DOM 요소의 스타일 속성은 가시성을 제어합니다.

Vue에서 요소를 숨기는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue는 요소의 표시 및 숨기기를 제어합니다.

해결책:

v-if 지시문과 v-show 지시문 모두 값을 기반으로 DOM 요소의 표시 및 숨기기를 동적으로 제어할 수 있습니다. v-if 및 v-show Vue 내에서 일반적으로 사용되는 명령어입니다. 명령어의 역할은 표현식의 값이 변경될 때 DOM에 특정 동작을 적용하는 것입니다.

  • v-if는 요소를 직접 삭제합니다.

  • v-show는 요소를 숨기고 요소의 CSS 속성 표시를 전환합니다.

   <p v-show="showGroup">
        <p class="formTitle">图层组</p >
    </p >

예를 들어 위의 p를 숨기려면 이 p에 v-show 속성을 추가하세요. 원하는 대로 이름을 지정할 수 있습니다

. 그런 다음 js 코드에서 showGroup의 기본값을 false로 설정합니다. 즉, 처음 시작할 때 나중에 이 p를 표시하려는 경우 기본적으로 표시되지 않습니다. , vm.showGroup=true로 직접 설정할 수 있습니다. Can

관련 권장사항: "vue.js tutorial"

위 내용은 Vue에서 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.