VUE学习五【动画，时间格式化】

<style>.fade-enter-active, .fade-leave-active { transition: opacity .5s }.fade-enter, .fade-leave-to { opacity: 0 }
/* 可以设置不同的进入和离开动画 */ 
.slide-fade-enter-active { transition: all .3s ease; }
.slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); }
.slide-fade-enter, .slide-fade-leave-to { transform: translateX(10px); opacity: 0; 
}</style>
<div id="demo1">
  <button @click="show = !show">Toggle1</button>
  <transition name="fade">
    <p v-if="show">hello</p></transition>
</div>
<div id="demo2">
  <button @click="show = !show">Toggle2</button>
  <transition name="slide-fade">
    <p v-if="show">hello</p></transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
    el: '#demo1',
    data: {
      show: true
    }
  }) new Vue({
    el: '#demo2',
    data: {
      show: true
    }
  })</script>
<style>.bounce-enter-active {

 animation: bounce-in .5s; 

}

.bounce-leave-active {

 animation: bounce-in .5s reverse; }

@keyframes bounce-in { 0% {transform: scale(0); }50% { transform: scale(1.5); }100% { transform: scale(1); } }

</style>
<div id="test2">
  <button @click="show = !show">Toggle show</button>
  <br>
  <transition name="bounce">
    <p v-if="show" style="display: inline-block">Look at me!</p></transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>new Vue({
    el: '#test2',
    data: {
      show: true
    }
  })</script>

<div id="test">
  <p>当前时间为: {{currentTime}}</p>
  <p>当前时间 1 为: {{currentTime | dateStr}}</p>
  <p>当前时间 2 为: {{currentTime | dateStr('YYYY-MM-DD')}}</p>
  <p>当前时间 3 为: {{currentTime | dateStr('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>// 注册过滤器 Vue.filter('dateStr', function (value, format) { return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss') })new Vue({ el: '#test', data: { currentTime: new Date() } }) 
  </script>