<!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>
vue 多個input type = radio單擊事件
因爲vue有綁定事件,v-mode,所以只需要給每個input設置value初值,並綁定同一個data,便可以實現單擊按鈕切換顯示不同內容。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.