Element-ui,radio中有两个相同的value,但根据text不同,只显示其中一个的办法

最近在做项目过程中用到lelement-ui中的radio。其中有一个radio组,有三个选项,但其中两个选项的value是一样的,但是要根据text的不同进行区分。最后把得到的各个radio组得到的value值相加减。
HTML

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">优:1</el-radio>
    <el-radio :label="0">中:0</el-radio>
    <el-radio :label="0">差:0</el-radio>
  </el-radio-group>
</template>

JS

data () {
      return {
        radio: 0
      };

效果如下:
如图中所示
如图中所示,若radio为0,则会选中两个选项。若想区分开,需要让radio有所不同。

0 === -0
//true
0 === 0.0
//true

如上所示,因此要变成字符串才会有所差别,最后相加减时,只需用Number()函数进行转换就行。
解决办法如下:
HTML

<template>
  <el-radio-group v-model="radio">
    <el-radio label="1">优:1</el-radio>
    <el-radio label="0">中:0</el-radio>
    <el-radio label="0.0">差:0</el-radio>
  </el-radio-group>
</template>

JS

data () {
      return {
        radio: '0'
      };
    }

效果如下
在这里插入图片描述
注意:radio的值变为字符串时,HTML中的label前面的:需去掉。

发布了2 篇原创文章 · 获赞 0 · 访问量 13
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览