uniapp radio-group点击获取值,判断非空方法实现

2021-01-10   阅读:4519   分类:前端    标签: uni-app

获取点击后置可以使用@change:<radio-group> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}

<template>
<view>
        <view>
            <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
                    <view>
                        <radio :value="item.value" :checked="index === current" />
                    </view>
                    <view>{{item.name}}</view>
                </label>
            </radio-group>
        </view>
    </view>
</template>
export default {
    data() {
        return {
            items: [{
                    value: PHP,
                    name: 'PHP'
                },
                {
                    value: 前端,
                    name: '前端',
                    checked: 'true'
                }            ],
            current: 0
        }
    },
    methods: {
        radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.target.value) {
                    this.current = i;
                    break;
                }
            }
        }
    }
}

注:多个按钮组的话可以定义一个数组,使用push()往数组追加元素,结合数组去重方法,来判断是否为空。

//去重函数
unique4(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
         for (var j = i+1; j < arr.length; j++) {
           if(arr[i]===arr[j]){
                   ++i;
           }
         }
           hash.push(arr[i]);
  }
  return hash;
},


【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/577.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×