vue에서 요소의 표시 및 숨기기를 제어하는 ​​데 어떤 지침이 사용됩니까?

青灯夜游
풀어 주다: 2021-12-27 15:27:31
원래의
2714명이 탐색했습니다.

vue에서는 "v-show" 명령을 통해 요소의 표시 및 숨기기를 제어할 수 있습니다. 이 명령은 단순한 CSS 기반 스위치로, 표시 스타일 속성을 설정하여 요소의 표시 및 숨기기를 제어할 수 있습니다. DOM 요소.

vue에서 요소의 표시 및 숨기기를 제어하는 ​​데 어떤 지침이 사용됩니까?

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

v-show 명령

v-show 명령은 요소의 표시 속성을 제어하여 v-show의 속성 값이 true이면 해당 요소가 표시되고, 그렇지 않으면 표시되지 않습니다.

v-show 표현식의 true 또는 false 값에 따라 요소의 displayCSS 속성을 전환합니다(표현식에서 파생된 부울 값을 기준으로 판단)

v-show 사용

1. 요소가 표시되거나 숨겨집니다

<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>
로그인 후 복사

Passed 인터페이스의 list.power 매개변수가 1과 같은지 여부, 1과 같으면 "true", 그렇지 않으면 "false"이고 v-show 명령이 true이면 표시되고, false이면 숨겨집니다.

2. 삼항 연산자 판단

<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="&#39;http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url=&#39;+item.urlai">AI</a>
로그인 후 복사

사실 이것도 첫 번째 형식으로 축약할 수 있습니다

<a class="warn" v-show="!item.ai == null" :href="&#39;http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url=&#39;+item.urlai">AI</a>
로그인 후 복사

이게 더 간단해요

[관련 추천: "vue.js tutorial"]

위 내용은 vue에서 요소의 표시 및 숨기기를 제어하는 ​​데 어떤 지침이 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!