easyui for vue RadioButton实现单选功能

最新推荐文章于 2021-06-29 16:45:04 发布

原创最新推荐文章于 2021-06-29 16:45:04 发布 · 910 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue easyui

vuejs 同时被 2 个专栏收录

4 篇文章

订阅专栏

easyui

2 篇文章

订阅专栏

本文介绍如何使用Vue.js实现一个简单的单选按钮功能。通过定义data属性和利用RadioButton组件，可以创建并控制单选按钮的状态。文章提供了HTML结构示例和data属性定义，展示了如何在切换选项时获取对应的值。

开篇：先看demo效果，是否是你需要用到的。

第一步：先按照官方文档把html写出来，参考如下：

<div class="formStyle_list">
        <div class="f-l">
          <Label for="Code" class="f-l">特价商品送积分</Label>
          <div
            v-for="(item,index) in specialPriceData"
            :key="index"
            class="f-l mr-10"
          >
            <RadioButton name="group2" :inputId="item.Id" :value="item.Id" v-model="specialPriceIndex"></RadioButton>
            <span :for="item">{{item.Name}}</span>
          </div>
          <span>（特价商品的定义在ERP中设置）</span>
          </div>
      </div>

第二部：定义data属性

data() {
    return {
      specialPriceData: [{ Id: "0", Name: "否" }, { Id: "1", Name: "是" }],
      specialPriceIndex: "0",
    }
}

结语：这样就实现了1个简单的单选按钮功能。另外大家要注意的是RadioButton 这个组件在切换的时候，value值就代表你切换时候v-model对应变量的值。这个很重要，也是前端需要拿到的值。