Vueでコンテンツを非表示にする方法

Vue でコンテンツを非表示にする方法: 1. 非表示または表示する必要があるコンテンツ div に「v-show」を追加します; 2. iconfont アイコンの div にクリック イベントを追加します; 3. それをラップします× にトランジションを付け、name 属性を追加します; 4. フェードにエフェクト スタイルを追加します。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue コンテンツを非表示にする方法は?

vue は、div をクリックしてコンテンツを表示または非表示にする機能を実装します。

1. まず、必要なコンテンツ div に v-show を追加します。非表示または表示。

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

2 を表示するか非表示にするかを決定します。ここでは、開いているコンテンツに × 記号を付けて表示効果をオフにし、iconfont アイコンの div にクリック イベントを追加します。

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

3. エクスポート時 デフォルトのコードは次のとおりです

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

を実現するには

4. 次のように、非表示にするトランジション アニメーション効果を追加します

トランジションで×を囲み、name 属性を追加します

<transition name="fade">
 <div class="activity-sheet-close" @click="toggleSupportShow">
            <span class="iconfont icon-close"></span>
 </div>         
 </transition>

フェードにエフェクト スタイルを追加し、スタイルに

&.fade-enter-active,&.fade-leave-active
        transition opacity .8s
&.fade-enter,&.fade-leave-to
        opacity 0

を追加して

推奨される学習: " vue.js ビデオ チュートリアル "

以上がVueでコンテンツを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。