Vue에서 콘텐츠를 숨기는 방법

vue에서 콘텐츠를 숨기는 방법: 1. 숨기거나 표시해야 하는 콘텐츠 div에 "v-show"를 추가합니다. 2. 아이콘 글꼴 아이콘의 div에 클릭 이벤트를 추가합니다. 3. 전환으로 ×를 래핑합니다. 이름 속성을 추가합니다. 4. 페이드에 효과 스타일을 추가합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

vue에서 콘텐츠를 숨기는 방법은 무엇입니까?

vue는 특정 div를 클릭하여 콘텐츠를 표시하고 숨기는 기능을 구현합니다

1. 먼저 숨기거나 표시해야 하는 콘텐츠 div에 v-show를 추가합니다. 이는 표시할지 숨길지를 판단한다는 의미입니다

<div  v-show="shopShow">内容</div>

2. 열려있는 내용에 × 표시가 있어서 표시 효과를 끄고, 아이콘폰트 아이콘

<div  @click="toggleShopShow">
            <span class="iconfont icon-close"></span>
</div>

3의 div에 클릭 이벤트를 추가합니다.

 export default {
    data () {
      return {
        shopShow: false, //默认内容不显示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false变为true显示
      },
    }
  }
</script>

달성하려면

4. 전환 애니메이션 효과를 추가하여 숨깁니다. 다음과 같이

전환을 래핑합니다.

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