Vue的表单组件之单选按钮
单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为假时不选。<div id="app"> <input type="radio" :checked="picked"></input> <l
·
单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定
一个布尔类型的值,为真时选中,为假时不选。
<div id="app">
<input type="radio" :checked="picked"></input>
<label>单选按钮</label>
</div>
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
picked:true
}
})
</script>
如果是组合使用来实现相互排斥的效果,就使用v-model来配合value来使用。
<div id="app">
<input type="radio" v-model="picked" value="学习" id="study">
<label for="study">学习</label><br>
<input type="radio" v-model="picked" value="读书" id="read">
<label for="study">读书</label><br>
<input type="radio" v-model="picked" value="运动" id="play">
<label for="study">运动</label><br>
<p>选择的选项是:{{picked}}</p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
picked:'study'
}
})
</script>
更多推荐
已为社区贡献36条内容
所有评论(0)