<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <link rel="stylesheet" >
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
? ? <!--<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="1000">-->
? ? ? ? <!--<h3 v-if="flag">{{msg}}</h3>-->
? ? <!--</transition>-->
? ? <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:200,leave:400}">
? ? ? ? <h3 v-if="flag">{{msg}}</h3>
? ? </transition>
? ? <input type="button" value="切換" @click="change">
</div>
<script>
? ? var vm=new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ? msg:"我是一個H3",
? ? ? ? ? ? flag:true
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? change(){
? ? ? ? ? ? ? ? this.flag=!this.flag;
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</body>
</html>
