因爲vue有綁定事件，v-mode，所以只需要給每個input設置value初值，並綁定同一個data，便可以實現單擊按鈕切換顯示不同內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo8</title>
<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<style>
.component-fade-enter-active,.component-fade-leave-actie{
transition:opacity .
3s ease;
}
.component-fade-enter,.component-fade-leave-actie{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<input type="radio" value='v-a' name="opt" v-model='view'>
<input type="radio" value='v-b' name="opt" v-model='view'>
<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>'
}
},
methods:{
}
})
</script>
</body>
</html>