[Vue.js]学习笔记-Vue.js过渡&动画-多个元素的过渡
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 另: Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
我们可以设置多个元素的过渡,一般列表与描述: 需要注意的是当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。 [HTML] 纯文本查看 复制代码 <transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>抱歉,没有找到您查找的内容。</p>
</transition>
如下实例:
[HTML] 纯文本查看 复制代码 <transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
在一些场景中,也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else, 上面的例子可以重写为:
[HTML] 纯文本查看 复制代码 <transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。 例如:
[HTML] 纯文本查看 复制代码 <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>
可以重写为:
[HTML] 纯文本查看 复制代码 <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'
}
}
}
|