如何在VueJs中动态添加属性 [英] How to add dynamically attribute in VueJs

问题描述

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

I'm using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my Textfield component :

    <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>

推荐答案

您可以使用<$ c将其绑定到变量$ c> v-bind：disabled = foo 或：disabled = foo 简称：

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

然后在Vue中，您只需设置 this.myVar = true ，它将禁用输入。

Then in Vue you can just set this.myVar = true and it will disable the input.

编辑：将其添加到模板中：

add this to your template:

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

这篇关于如何在VueJs中动态添加属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！