不能让Vue.js转换工作

Can't get Vue.js transition to work?

本文关键字：转换 工作 js Vue 不能      更新时间：2023-09-26

我无法获得vue.js(版本1)转换运行。我从他们的网站上偷了代码。它应该运行javascript console.logs!

 Vue.transition('fade', {
      css: false,
      enter: function (el, done) {
        console.log('enter');
      },
      enterCancelled: function (el) {
        console.log('enterCancelled');
      },
      leave: function (el, done) {
       console.log('leave');
      },
      leaveCancelled: function (el) {
        console.log('leaveCancelled');
      }
    });
     var Vue = new Vue({
      el: '#app',
      data: {
        
      }
    });
    <div id="app">
        <p transition="fade">test fade</p>
    </div>

使用Vue.js的过渡系统，您可以在元素插入或从DOM中移除时应用自动过渡效果。

transition属性可以和:

一起使用
  • v
  • v-show
  • v

试试:

Vue.transition('fade', {
    css: false,
	enter: function (el, done) {
		console.log('enter');
	},
	enterCancelled: function (el) {
		console.log('enterCancelled');
	},
	leave: function (el, done) {
		console.log('leave');
	},
	leaveCancelled: function (el) {
		console.log('leaveCancelled');
	}
});
var Vue = new Vue({
	el: '#app',
	data: {
		show: false
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="app">
    	<button @click="show = !show">{{ show ? 'hide' : 'show' }}</button>
        <p v-show="show" transition="fade">test fade</p>
</div>

相关文章：