如何在 VueJs 中动态添加属性

Question

我正在使用 vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在 vuejs 中添加动态属性？在我的 Textfield 组件 下方：

     <template>
     <input type="text" placeholder="{{ placeholder }}" v-model="value">
    </template>
    <script>
    export default  {
      props: {
       disabled: {type: Boolean, default: false},
       placeholder: {type: String, default: ""},
       value: {twoWay: true, default: ""}
      }
     }
    </script>

用法：

 <textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>

原文由 Maria Minh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 v-bind:disabled="foo" 或 :disabled="foo" 将其绑定到变量：

 <textfield label="Name" value.sync="el.name" :disabled="myVar">

然后在 Vue 中你可以设置 this.myVar = true 它会禁用输入。

编辑：将此添加到您的模板中：

 <template>
  <input type="text" :disabled="disabled" :placeholder="placeholder" v-model="value">
</template>

原文由 Jeff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如所指出的，您的情况不需要动态属性。

但是，你问是否可能，答案是肯定的。从 2.6.0 开始，您可以拥有动态属性。

例子：

 <a v-bind:[attributeName]="whatever">

它记录 在这里

原文由 rosell.dk 发布，翻译遵循 CC BY-SA 4.0 许可协议