您的位置：首页 > 产品设计 > UI/UE

vue 多个input type = radio单击事件

2017-03-04 22:49 435 查看

因为vue有绑定事件，v-mode，所以只需要给每个input设置value初值，并绑定同一个data，便可以实现单击按钮切换显示不同内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo8</title>
<link href="https://unpkg.com/animate.css@3.5.1/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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航