[Vue.js] v-if 與 v-show的差別

遇到 animate.css + wow.js 時，v-if 會重新觸發CSS動畫執行

by ShadowKao

HTML

<!-- wow.js的應用網頁範例：http://4c.pchome.com.tw/campaign/2019/cny/ -->

<!DOCTYPE html>
<html lang="utf-8">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--引用animare.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

    <style type="text/css">
      .myHr {
        margin-bottom: 800px;
      }

      .box1,
      .box2 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
      }

      .box1 {
        background: red;
      }

      .box2 {
        background: blue;
      }

      .no-scroll-show {
        border: 1px solid #000;
        padding: 15px;
        overflow: hidden;
      }

      .my-animation-delay {
        animation-delay: 250ms;
      }

    </style>
  </head>

  <body>

    <div id="myApp" class="container">
      <div>
        <label>   <input type="checkbox" v-model="myIf" /> v-if 切換顯示/隱藏 </label>
      </div>
      <div v-if="myIf">
        v-if div
      </div>
      <!--<template>標記 不會被當做DOM，渲染在畫面上-->

      <template v-if="myIf">
			     v-if  template 
	    </template>
      <hr />
      <div>
        <label>   <input type="checkbox" v-model="myShow" /> v-show 切換顯示/隱藏 </label>
      </div>




      <div v-show="myShow">
        v-show div
      </div>

      <!--<template>是Vue.js標記，無法為它添加display:none;-->
      <template v-show="myShow">
		  v-show  template
 </template>


      <hr />
      <div>
        滑鼠請往下捲動
      </div>
      <hr class="myHr" />


      <div v-if="myIf" class="no-scroll-show">
        v-if
        <div class="box1 wow fadeInRightBig">
          box1
        </div>
        <div class="box2 wow fadeInRightBig my-animation-delay ">
          box2
        </div>
      </div>
      <div>
        <label>   <input type="checkbox" v-model="myIf" />  v-if 切換顯示/隱藏...