Vue에서 숨겨진 데이터를 표시하는 방법

Vue에서는 v-if, v-show, 계산된 속성 또는 메서드를 통해 데이터를 숨기거나 표시할 수 있습니다. 아래에서는 이러한 방법을 자세히 살펴보겠습니다.

1. v-if/v-else는 표시를 제어합니다

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

이 예에서는 부울 유형 데이터 isShow를 사용하여 데이터를 표시할지 숨길지 제어합니다. isShow 값이 true이면 표시할 데이터가 표시되고, 그렇지 않으면 숨겨집니다.

2. v-show는 디스플레이를 제어합니다

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

v-if/v-else와 달리 v-show는 CSS 디스플레이 속성을 제어하여 데이터를 표시하거나 숨깁니다. isShow 값이 true이면 표시할 데이터가 표시되고 표시 속성은 기본적으로 차단과 같은 요소에 설정된 값입니다. 그렇지 않으면 숨겨지며 표시 속성은 없음입니다.

v-if/v-else와 v-show는 사용 시나리오가 다릅니다. v-if/v-else는 조건이 충족될 때만 해당 콘텐츠를 렌더링하므로 자주 전환해야 하는 경우에 사용하기에 적합합니다. 그런 다음 조건이 충족되지 않으면 파괴하고 다시 렌더링합니다. v-show는 단순히 CSS 표시 속성을 제어하기 때문에 초기 렌더링에서 조건에 따라 데이터 표시 또는 숨기기를 제어해야 할 때 사용하기에 적합합니다.

3. 계산된 계산 속성

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

계산 속성은 템플릿의 일부 값을 동적으로 계산하고 계산 결과를 렌더링을 위해 템플릿에 반환할 수 있습니다. 위의 예에서는 계산된 계산 속성의 메시지 메서드를 사용하여 isShow 값의 변경 사항에 따라 표시할 데이터를 동적으로 변경합니다.

4. 메서드 method

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

methods 메서드는 템플릿의 메서드를 동적으로 호출하고 렌더링을 위해 메서드의 반환 값을 템플릿에 반환할 수 있습니다. 위의 예에서는 isShow 값의 변화에 ​​따라 표시할 데이터를 동적으로 변경하기 위해 메소드 메소드의 getMessage 메소드를 사용했습니다.

어떤 방법을 사용하든 특정 시나리오에 따라 데이터를 숨기거나 표시하는 적절한 방법을 선택하는 것이 핵심입니다.

위 내용은 Vue에서 숨겨진 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!