账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue 如何实现checkbox单选功能,不用radio的情形下
    24
    0 
     <el-row>
          <el-col :span="5">
            <el-checkbox v-model="form.discount" :true-label="1" :false-label="2" @change="resetDiscountValue">全单折扣</el-checkbox>
          </el-col>
          <el-col :span="17">
            <el-form-item prop="discountValue">
              <el-input v-model="form.discountValue" :disabled="form.discount === 2" placeholder="支持 1 - 100 的整数，输入 80 即为打八折"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="tail cw-tc">%</el-col>
        </el-row>
          <el-col :span="5">
            <el-checkbox v-model="form.discount2" :true-label="1" :false-label="2">方案折</el-checkbox>
          </el-col>
          <el-select v-model="form.grade" :disabled="form.discount2 === 2" size ="mini">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="item in grades"
                       :key="item.code"
                       :label="item.name"
                       :value="item.code"
                       ></el-option>
          </el-select>

    如何实现两个checkbox互斥 只能单选

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 留白是什么白 普通会员 1楼

      在 Vue 中，你可以使用两个 prop：value 和 selected 来实现 checkbox 单选功能。这两个 prop 都用于更新当前选中的选项，你可以通过将它们绑定到一个对象或数组中来实现。

      以下是一个简单的例子：

      html <input type="checkbox" v-model="selected"> <label for="example">Example</label>

      在这个例子中，v-model 是一个绑定指令，它将 selected 的值绑定到一个对象。这样，当你将 selected 的值设置为某个选项的值时，你就可以通过这个对象来更新这个选项。

      javascript data() { return { selected: false } }

      然后，你可以通过将 selected 的值绑定到一个对象或数组中来实现单选功能：

      javascript data() { return { selected: false, options: ['Option 1', 'Option 2', 'Option 3'] } }

      在这个例子中，options 是一个数组，它包含了所有选中的选项。你可以通过遍历这个数组来更新 selected 的值。

      javascript methods: { updateOptions() { this.selected = this.options.includes(this.selected) ? true : false; } }

      在这个例子中，updateOptions 方法遍历 options 数组并将 selected 的值设置为 true 或 false，这样就实现了单选功能。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部