Vue에서 요소를 숨기는 명령은 무엇입니까-프런트엔드 Q&A-php.cn

Vue에서 요소를 숨기는 명령은 무엇입니까

青灯夜游

풀어 주다： 2022-12-15 10:37:06

원래의

3445명이 탐색했습니다.

vue에서 요소를 숨기는 명령은 "v-show"입니다. v-show 명령은 true 또는 false 표현식을 기반으로 요소를 표시할지 숨길지를 결정합니다. 구문은 "v-show="expression""입니다. v-show 명령은 요소의 CSS 표시 속성을 변경하여 요소의 표시 및 숨기기 상태를 제어합니다. 명령 뒤에 오는 표현식의 내용은 값이 true(true)인 경우 결과적으로 부울 값으로 구문 분석됩니다. 요소가 표시되고, 값이 false(false)인 경우 요소가 숨겨집니다.

Vue에서 요소를 숨기는 명령은 무엇입니까

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue.js는 다음 표현식의 참 또는 거짓 값을 기반으로 요소를 표시할지 숨길지를 결정하는 v-show 지시어를 제공합니다.

v-show 명령은 요소 CSS의 표시 속성을 변경하여 요소의 표시 및 숨겨진 상태를 제어합니다.

v-show 명령 소개

v-show 명령 뒤에는 부울 변수 또는 부울 표현식이 와야 하며, 값이 true이면 요소가 표시되고, 값이 false이면 요소가 표시됩니다. 숨겨져 있습니다.

<标签 v-show="true/false"></标签>

<!--true:显示   false:隐藏-->

로그인 후 복사

예:

<div id="app">
    <p v-show="flag == &#39;显示&#39;">Vue 课程</p>
</div>

로그인 후 복사

<script>
    var app = new Vue({
        el: &#39;#app&#39;,
        data: {
            flag: &#39;隐藏&#39;
        }
    });
</script>

로그인 후 복사

플래그가 '숨기기'로 설정되면 "Vue 코스"가 표시되지 않고, 플래그가 '표시'로 설정되면 "Vue 코스"가 표시됩니다.

실제로 플래그를 'hidden'으로 설정하면 p 요소의 CSS 속성 표시가 none으로 설정되어 해당 요소가 숨겨집니다.

렌더링된 코드는 다음과 같습니다.

<p style="display: none;">Vue 课程</p>

로그인 후 복사

v-show 코드 예제

다음은 html 및 js 코드 예제입니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>v-show指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示" @click="changeIsShow" />
			<p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</script>
	</body>
</html>

로그인 후 복사

렌더링된 코드는 다음과 같습니다

<p style="display: none;">不装了，我摊牌了，没错你要找的就是我</p>

로그인 후 복사

코드의 실행 결과는 다음과 같습니다. 다음과 같습니다:

Vue에서 요소를 숨기는 명령은 무엇입니까

요약

v-show 명령의 기능은 참값과 거짓값에 따라 요소의 표시 상태를 전환하는 것입니다
원칙은 수정하는 것입니다 요소의 CSS 속성(표시)을 사용하여 표시할지 숨길지 결정합니다
명령 뒤의 내용은 결국 부울 값으로 구문 분석됩니다
값이 true(true)이면 요소는 다음과 같습니다. 표시되며, 값이 false(false)이면 요소가 숨겨집니다.
데이터가 변경된 후 해당 요소는 어떻게 되나요? 표시 상태도 동기적으로 업데이트됩니다

[관련 권장 사항: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발]

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