<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多组件的过渡</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<style>
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
opacity: 0;
}
</style>
<body>
<div id="app">
<input type="radio" name="aa" value="v-a" id="aa" v-model="view">
<label for="aa">aa</label>
<input type="radio" name="aa" value="v-b" id="bb" v-model="view">
<label for="bb">bb</label>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
</script>
</body>
</html>
网友评论