Vue에서 요소를 숨기는 명령은 무엇입니까
- 青灯夜游원래의
- 2022-12-15 10:37:063423검색
vue에서 요소를 숨기는 명령은 "v-show"입니다. v-show 명령은 true 또는 false 표현식을 기반으로 요소를 표시할지 숨길지를 결정합니다. 구문은 "v-show="expression""입니다. v-show 명령은 요소의 CSS 표시 속성을 변경하여 요소의 표시 및 숨기기 상태를 제어합니다. 명령 뒤에 오는 표현식의 내용은 값이 true(true)인 경우 결과적으로 부울 값으로 구문 분석됩니다. 요소가 표시되고, 값이 false(false)인 경우 요소가 숨겨집니다.
이 튜토리얼의 운영 환경: 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 == '显示'">Vue 课程</p>
</div><script>
var app = new Vue({
el: '#app',
data: {
flag: '隐藏'
}
});
</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>
코드의 실행 결과는 다음과 같습니다. 다음과 같습니다:
요약
v-show 명령의 기능은 참값과 거짓값에 따라 요소의 표시 상태를 전환하는 것입니다
-
원칙은 수정하는 것입니다 요소의 CSS 속성(표시)을 사용하여 표시할지 숨길지 결정합니다
명령 뒤의 내용은 결국 부울 값으로 구문 분석됩니다
값이 true(true)이면 요소는 다음과 같습니다. 표시되며, 값이 false(false)이면 요소가 숨겨집니다.
데이터가 변경된 후 해당 요소는 어떻게 되나요? 표시 상태도 동기적으로 업데이트됩니다
[관련 권장 사항: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발]
위 내용은 Vue에서 요소를 숨기는 명령은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!