v-show 지시문을 사용하여 Vue에서 요소를 표시하고 숨기는 방법

Vue는 동적이고 현대적인 웹 애플리케이션을 구축할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue는 뷰에서 대화형 요소를 생성하기 위해 v-show 지시문을 포함한 다양한 지시문을 제공합니다. 이 기사에서는 v-show 지시문을 사용하여 Vue에서 요소를 표시하고 숨기는 방법을 살펴보겠습니다.

v-show 지시어는 특정 조건에 따라 요소를 표시하거나 숨기는 데 사용되는 지시어입니다. v-show 지시문은 div, 범위, p, 버튼 등과 같은 모든 HTML 요소에 첨부될 수 있습니다. 지시문의 값이 true이면 요소가 표시되고, 그렇지 않으면 요소가 숨겨집니다. 다음은 v-show 지시문을 사용하여 요소를 표시하고 숨기는 간단한 예입니다.

<template>
  <div>
    <button @click="toggleText">Toggle Text</button>
    <p v-show="showText">Hello World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: true
    }
  },
  methods: {
    toggleText() {
      this.showText = !this.showText
    }
  }
}
</script>

이 예에서는 버튼과 p 태그가 포함된 구성 요소를 만듭니다. v-show 지시문을 사용하여 p 태그를 showText 값에 바인딩합니다. showText의 기본값은 true이므로 컴포넌트가 초기화되면 p 태그가 표시됩니다. 사용자가 버튼을 클릭하면 p 라벨을 표시하거나 숨기기 위해 showText 값을 변경하는 전환 텍스트 메서드를 호출합니다.

v-show 명령을 사용하면 계산된 속성을 결합하여 더 복잡한 조건부 제어를 구현할 수 있습니다. 예를 들어, 다음 예에서는 계산된 속성을 사용하여 요소를 표시하거나 숨기는 방법을 보여줍니다.

<template>
  <div>
    <input type="checkbox" v-model="isChecked"> Show Text
    <p v-show="shouldShowText">Hello World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
    shouldShowText() {
      return this.isChecked
    }
  }
}
</script>

이 예에서는 체크박스와 p 태그가 포함된 구성 요소를 만들었습니다. v-model 지시어를 사용하여 체크박스를 isChecked 값에 바인딩합니다. 우리는 계산된 속성 shouldShowText를 사용하여 체크박스가 선택되었는지 여부의 값에 p 태그를 바인딩합니다. shouldShowText는 체크박스가 선택된 경우 p 태그를 표시하기 위해 true를 반환하고, 그렇지 않으면 p 태그를 숨기기 위해 false를 반환합니다.

요약

v-show 지시문은 Vue에서 요소를 표시하고 숨기는 효과적인 방법입니다. 특정 조건에 따라 요소를 쉽게 표시하거나 숨길 수 있습니다. 단순한 조건부 제어이든 복잡한 계산이든 v-show 지시문은 대화형 Vue 애플리케이션의 일반적인 요구 사항을 구현하는 데 사용할 수 있는 매우 실용적인 도구입니다.

위 내용은 v-show 지시문을 사용하여 Vue에서 요소를 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!