多个元素的过渡
我们之后讨论多个组件的过渡，对于原生标签可以使用
v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>Sorry, no items found.</p>
</transition>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个元素的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<transition>
<table v-if="items.length > 0">
<caption>黄子涵</caption>
<tr>
<th>黄子涵是帅哥</th>
<th>黄子涵是靓仔</th>
<th>黄子涵真厉害</th>
<th>黄子涵真聪明</th>
</tr>
</table>
<p v-else>黄子涵没有发现项目</p>
</transition>
</div>
<script>
var VM = new Vue({
el: '#hzh',
data: {
items: {
length: 1
}
}
})
</script>
</body>
可以这样使用，但是有一点需要注意：
警告
当有相同标签名的元素切换时，需要通过
keyattribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在<transition>组件中的多个元素设置 key 是一个更好的实践。
示例：
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个元素的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<transition>
<button v-if="hzhEdit" key="hzh">
黄子涵
</button>
<button v-else key="hcq">
黄春钦
</button>
</transition>
</div>
<script>
var VM = new Vue({
el: '#hzh',
data: {
hzhEdit: true
}
})
</script>
</body>
在一些场景中，也可以通过给同一个元素的 key attribute 设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：
<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
使用多个 v-if 的多个元素的过渡可以重写为绑定了动态 property 的单个元素过渡。例如：
<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'
}
}
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个元素的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="hzh">
<transition>
<button v-bind:key="hzhState">
{{ hzhButtonMessage }}
</button>
</transition>
</div>
<script>
new Vue({
el: '#hzh',
data: {
hzhState: 'hzh'
},
computed: {
hzhButtonMessage: function () {
switch (this.hzhState) {
case 'hzh': return '黄子涵'
case 'hcq': return '黄春钦'
case 'cly': return '陈兰英'
}
}
}
})
</script>
</body>
