Vue的表单组件之单选按钮

红太狼 2023-10-18 08:58 6阅读 0赞

单选按钮在单独使用时，不需要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>

![70][]

[70]: https://img-blog.csdn.net/20180919201958892?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java Swing JRadioButton：单选按钮组件

单选按钮与复选框类似都有两种状态，不同的是一组单选按钮中只能有一个处于选中状态。Swing 中 JRadioButton 类实现单选按钮，它与 JCheckBox 一样都是从

旧城等待，/ 2024年03月30日 06:38/ 0 赞/ 91 阅读

相关 Vue的表单组件之单选按钮

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。 <div id="app"> <inp

红太狼/ 2023年10月18日 08:58/ 0 赞/ 7 阅读

相关 Swing010——RadioButton：单选按钮组件

一、API简介 ![1][] ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q

Bertha 。/ 2023年10月06日 19:46/ 0 赞/ 3 阅读

相关修改单选按钮按钮位置

要点 android:button="@null" android:drawableRight="@drawable/news\_msg\_notice\_radio"

古城微笑少年丶/ 2023年10月05日 10:42/ 0 赞/ 55 阅读

相关 Vue之表单提交校验组件

仿element实现表单提交校验组件 form组件 <template> <div> <form>

怼烎@/ 2022年12月04日 11:00/ 0 赞/ 229 阅读

相关 RadioButton单选按钮

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

冷不防/ 2022年09月26日 03:15/ 0 赞/ 232 阅读

相关 Vue中封装组件-单选按钮组-LjRadioGroup

效果图： ![20210806111306109.png][] 使用： <template> <div> <LjRadioGroup

淩亂°似流年/ 2022年09月03日 07:25/ 0 赞/ 293 阅读

相关 android单选按钮使用

android单选按钮使用单选按钮使用的时候首先需要增加一个radiobuttongroup然后在里面添加radiobutton. 具体的使用如下： pac

朱雀/ 2022年07月17日 02:45/ 0 赞/ 237 阅读

相关点击单选按钮radio后面的文字即可选中单选按钮

http://blog.csdn.net/w\_\_yi/article/details/7527926 关键字：radio 单选按钮文字选中有时候我们在

我就是我/ 2022年02月13日 08:39/ 0 赞/ 408 阅读

相关 flutter 单选框按钮组件Radio、单选框卡片组件 RadioListTile、开关组件Switch、开关卡片组件SwitchListTile

单选框按钮组件单选框按钮必须成对出现,不能只出现一个 Radio( value:点击后传递的值,

「爱情、让人受尽委屈。」/ 2021年07月25日 01:21/ 0 赞/ 605 阅读