<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>