在 VUE 模板中将所有对象的键和值作为 HTML 属性动态传递

Question

我想将像myObj = {id: "personal_info", name:"info", required: true, className: "form-control"}这样的对象传递给输入、文本区域或选择元素。目标是对象的属性将是 HTML 元素的属性。

像这样：

<input v-bind="myObj" >

我希望它生成这个：

<input id="personal_info" name="info" required="true" class="form-control">

我正在构建一个表单生成器模板，以帮助我更轻松地生成表单。所以我的目标是优化这个过程。我正在做的是这样的：

<input v-if="element == 'input'"
:id="cssId" :class="className" :type="type">
<textarea v-if="element == 'textarea'"
:id="cssId" :class="className" :rows="rows" :cols="cols">
</textarea>
<select v-if="element == 'select'" :id="cssId" :class="className">
<option v-for="(option, index) in options" :key="index" :value="option.value">
{{ option.text }}
</option>
</select>

但是，有许多属性可能无法使用。可以有许多属性，它们可能是不同的(例如，输入元素可能有disabled或readonly，文本区域可以有rows和cols(。

因此，我不能简单地编写它们，因为如果不使用它们，变量将是未定义的，并且会抛出错误。即使我为所有这些设置了默认值，也会有更多的工作，因为我必须一个接一个地编写属性，这会在我的代码中造成混乱。它还会向元素添加不必要的属性。

Answer 1

你回答了你自己的问题。v-bind将是绑定多个属性的合适方法。