首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在VUE.js中定义选中和取消选中的复选框的值?

如何在VUE.js中定义选中和取消选中的复选框的值?
EN

Stack Overflow用户
提问于 2015-08-20 21:30:34
回答 3查看 21.8K关注 0票数 17

有没有办法为.定义选中和未选中的值?现在VUE将模型设置为true/false,这是有意义的,但在实际应用程序中,数据格式类似于'1‘=> true和''=>false。如何在VUE中实现这一点?

EN

回答 3

Stack Overflow用户

发布于 2018-05-31 09:01:50

您可以使用true-valuefalse-value

https://vuejs.org/v2/guide/forms.html#Checkbox-1

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
票数 39
EN

Stack Overflow用户

发布于 2015-08-20 23:51:47

不知道你到底需要什么,但是,正如你所说,如果你这样做了:

{{ boxtest }}

<input type="checkbox" v-model="boxtest"/>

当您选中或取消选中该框时,Boxtest将显示为'true‘或'false’。

如果你确实需要转换它,你可以像这样做:

{{ boxtest ? 1 : '' }}
票数 1
EN

Stack Overflow用户

发布于 2020-09-18 16:29:46

如果您需要在组件中包装一个字段,则必须稍微修改代码。

<template>
        <div class="flex items-center h-5">
            <input
                @input="$emit('input', reversedValue)"
                :id="id"
                :value="value"
                type="checkbox"
                :checked="checked"
            />
        </div>
</template>

<script>
export default {
    props: {
        value: [Boolean, String, Number],
        trueValue: {
            type: [Boolean, String, Number],
            default: true
        },
        falseValue: {
            type: [Boolean, String, Number],
            default: false
        },
    },
    computed: {
        reversedValue() {
            return this.value === this.trueValue ? this.falseValue : this.trueValue;
        },
        checked() {
            return this.value === this.trueValue;
        }
    }
};
</script>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32119653

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档