当前阅读教程:Vue.JS入门教程 > JavaScript 钩子 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 自定义过渡的类名 | 下一篇: Vue.js 响应接口 |
可以在属性中声明 JavaScript 钩子 HTML 代码: <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> JavaScript 代码: // ... methods: { // -------- // 进入中 // --------
beforeEnter: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... },
// -------- // 离开时 // --------
beforeLeave: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
初始渲染的过渡可以通过 appear 特性设置节点在初始渲染的过渡 <transition appear> <!-- ... --> </transition> 这里默认和进入/离开过渡一样,同样也可以自定义 CSS 类名。 <transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class" > <!-- ... --> </transition> 自定义 JavaScript 钩子: <transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition> 多个元素的过渡我们可以设置多个元素的过渡,一般列表与描述:
需要注意的是当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。
<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>抱歉,没有找到您查找的内容。</p> </transition> 如下实例: <transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition> 在一些场景中,也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else,上面的例子可以重写为: <transition> <button v-bind:key="isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> </transition> 使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如: <transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition> 可以重写为: <transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition>
// ... computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } } |
|
上一篇: 自定义过渡的类名 | 下一篇: Vue.js 响应接口 |