如何根据Vue中的特定值使输入只读？

Davaid小卤蛋2020-03-19

如何使输入字段基于Vue数据为只读？

例如：

<select class="form-control" 
        id="selectCategory" 
        :disabled="cat_id >= 
            1" 
        name="cat_id">

我想使该字段为只读但不禁用。我该如何实现？

卡卡西乐逆天2020/03/19 10:11:49

您可以具有一个计算属性，该属性根据所需的条件返回一个布尔值。

<input type="text" :disabled=isDisabled>

然后将您的逻辑放在计算属性中...

computed: {
 isDisabled() {
// evaluate whatever you need to determine disabled here...
   return true;
 }
}

Pro猿2020/03/19 10:11:49

请注意，根据HTML规范，HTML中的select标签没有只读属性。

但是，在一般情况下，我会选择这样的内容：

<input class="form-control" id="selectCategory" :readonly="cat_id >= 1">

基本上，文档说如果属性值评估为false，则该属性将被省略。有关更多详细信息，请参见此处。

十三L2020/03/19 10:11:49

您可以执行以下操作：

<input v-bind:readonly="isReadOnly">

Newest Answer