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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!