vue el-radio 监听选中变化的值

文章描述了一个使用Vue.js的el-radio组件实现的选择器,当用户选择油泵车时,会禁用相关选项并设置默认文件类型为.csv;选择电源车则启用选项并设置默认文件类型为.txt。changeHandler函数处理了选中值变化的逻辑。
摘要由CSDN通过智能技术生成
 <el-radio-group
          v-model="newFrom.FileType"
          @change="changeHandler"
        >
          <el-radio
            label="1"
            v-model="newFrom.EquipmentType"
          >油泵车</el-radio>
          <el-radio
            label="2"
            v-model="newFrom.EquipmentType"
          >电源车</el-radio>
        </el-radio-group>


 /**
     * 监听单选框值的变化 
     * @param {*} val
     */
    changeHandler(val) {
      console.log(val, "选中值变化");
      if (val == 1) {
        this.isdisabled = true;
        this.placeText = "电源车不需要选择";
        this.showEquipcode = false;
        this.acceptData = ".csv";
      } else {
        this.isdisabled = false;
        this.placeText = "请选择";
        this.showEquipcode = true;
        this.acceptData = ".txt";
      }
    },

vue el-radio 监听选中变化的实例

 

el-radio-group的绑定可以通过v-model来实现。在el-radio-group上使用v-model指令,将其绑定到一个data中的变量上,这个变量就是el-radio-group的。当el-radio-group的发生变化时,v-model会自动更新绑定的变量的。同时,el-radio-group还有一个change事件,可以通过@change来监听变化。当发生变化时,change事件会触发,并将新的作为参数传递给事件处理函数。通过在事件处理函数中对进行判断,可以决定本次点击是否有效。\[1\] 另外,如果需要封装el-radio-group组件,可以使用props来接收外部传入的,并在组件内部使用v-model来绑定这个。在组件内部,可以通过监听value的变化来更新组件内部的radio,并通过$emit('input', this.radio)来将radio传递给父组件。\[2\] 在el-radio-group的源码中,可以看到model属性的定义。model属性是一个对象,其中get方法用于获取el-radio-group的,如果el-radio-group是在el-radio-group中使用的,则获取_radioGroup的,否则获取value的。set方法用于设置el-radio-group的,如果el-radio-group是在el-radio-group中使用的,则通过dispatch方法将传递给父组件,否则通过$emit('input', val)将传递给父组件。\[3\] #### 引用[.reference_title] - *1* *3* [el-radio-group change事件获取老](https://blog.csdn.net/Chinese521/article/details/121744564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue 基于v-model 双向绑定原理 二次封装el-radio-group组件](https://blog.csdn.net/wh20141212/article/details/124257004)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值