请选择 进入手机版 | 继续访问电脑版
爱气象,爱气象家园! 

气象家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

搜索
查看: 3002|回复: 4

Vue编程学习之单选框radio

[复制链接]

新浪微博达人勋

发表于 2021-10-12 09:54:17 | 显示全部楼层 |阅读模式

登录后查看更多精彩内容~

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x
本帖最后由 15195775117 于 2021-10-12 09:59 编辑

基础版:


效果图:
单选框基础版.png

组件代码:


原理:
3个radio标签各设置不同的value值,用以区分,
3者共用同一个v-model值,
当某个radio被选中,该radio的value值就赋给v-model值代表的变量


<template>
    <div id="app">
        <input type="radio" value="北京" v-model="radio_value" />
        <input type="radio" value="上海" v-model="radio_value" />
        <input type="radio" value="广州" v-model="radio_value" />
        <p>选择结果:{{radio_value}}</p>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                radio_value:'上海' //如果不设默认选项就用空字符串''
            }
        }
    }
</script>


我的思考:
这个版本的写法有个问题,单选框的圆圈后面都是带文字的嘛,这个需要自己另写,单选框与其文字脱离是个麻烦事。




密码修改失败请联系微信:mofangbao

新浪微博达人勋

 楼主| 发表于 2021-10-12 10:08:46 | 显示全部楼层
Element版


效果图:


el-radio.png


组件代码:


<template><div>
  <el-radio v-model="radio" label="1">北京</el-radio>
  <el-radio v-model="radio" label="2">上海</el-radio>
  <el-radio v-model="radio" label="3">广州</el-radio>
</div></template>

<script>
  export default {
    data () {
      return {
        radio: ''
        //如果这里是'2',则单选框组一开始默认选择label是2的选项,
        //如果是空字符串'',则一开始不选
      };
    }
  }
</script>


我的思考:
Element版的单选框就比基础版的好些,带了圆圈后面的文字




密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2021-10-12 14:42:42 | 显示全部楼层
使用for循环生成radio


效果图:
for循环生成radio.png


组件代码:


<template><div id="app">
    <el-radio v-model="radio" v-for="item in options" :label=item>{{item}}</el-radio>
    <p>单选选项是:{{radio}}</p>
    <p>{{msg}}</p>
</div></template>

<script>

// 单选框的输入量是一个序列:
let options = ['北京', '上海', '广州']

export default {
    name: 'app',
    data() {
        return {
            msg: '等待选择',
            radio: '上海',
            options: options
        }
    },
    watch: {
        radio: function () {
            this.msg = '监听函数发现,选项是:' + this.radio
        }
    }
}
</script>



密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

发表于 2021-10-12 15:25:46 | 显示全部楼层
前后端通吃啊,全栈工程师
密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2021-10-12 15:52:17 | 显示全部楼层
werewolf 发表于 2021-10-12 15:25
前后端通吃啊,全栈工程师

没办法,后端没前端看不见,前端没后端动不了,前端后端休戚相关,不可偏废
密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Copyright ©2011-2014 bbs.06climate.com All Rights Reserved.  Powered by Discuz! (京ICP-10201084)

本站信息均由会员发表,不代表气象家园立场,禁止在本站发表与国家法律相抵触言论

快速回复 返回顶部 返回列表