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

JavaScript Vue.js

Davaid小卤蛋

2020-03-19

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

例如：

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

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

第2253篇《如何根据Vue中的特定值使输入只读？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

卡卡西乐逆天 2020.03.19

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

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

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

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

Pro猿 2020.03.19

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

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

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

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

十三L 2020.03.19

您可以执行以下操作：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android