使用Vue.js从JSON向元素添加属性

Question

我正在使用Vue.js V1并希望采用这样的JSON：

{ "class": "foo bar", "max-length": 25 }

并将其映射到元素，如下所示：

<input type="text" {{ json }} />

这就是：

<input type="text" class="foo bar" max-length="25" />

我尝试使用方法<input type="text" {{ convertJSON(json) }} />，其中convertJSON从JSON创建一个字符串。这不起作用。当我用它进行变换时，它会给我一个错误“找到驼峰案例属性”。

这可以用Vue吗？

编辑：我想这样做而不必手动浏览每个属性;我已经知道如何绑定它们了。我想知道是否有可能动态地做到这一点。我怀疑它不是要检查。

感谢。

Answer 1

您可以将属性对象传递给v-bind。这适用于v1和v2。

在您的情况下，假设json是JSON对象：

<input type="text" v-bind="json" />

Here's an example fiddle.

Answer 2

这种语法很可能会失败 - 在渲染html之后运行vue - 这里你已经有了主要的html问题，因为它会尝试将{{json}}解释为html属性。

但是，您始终可以绑定数据

<div v-bind:class="myJson.class" v-bind:max-length="myJson['max-length']">
...

如果你真的有兴趣用一个json绑定所有东西，你可以简单地创建一个包含基本输入的组件，如

<template>
    <inputv-bind:class="data.class" v-bind:max-length="data['max-length']">
</template>

在这里定义一个道具

// .. component definition
props: ['data'], 
// ..

Answer 3

只需使用v-bind。

例如

<input type="text" v-bind:class=[myClass] v-bind:maxlength=[myLength] />

data: {
  myClass: 'foo',
  myLength: 25
}

```

Live Example

Answer 4

您可以创建一个自定义指令，该指令将json作为参数，并自动将每个键值对转换为元素上的arrtibute。