从JSON使用Vue.js

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

此语法很可能会失败--vue会在呈现html后运行 - 您已经在此处遇到重大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上元素。