Question

是否可以从对象构造元素的属性？

例如，我有对象var options = {name: 'book', class: 'red', id='book1'}。

然后我可以通过以下方式使用此变量：

<a {...options}>foo bar baz</a>

它将呈现以下代码： foo bar baz

Answer 1

将对象语法与v-bind一起使用。记录here。

<a v-bind="{name: 'book', class: 'red', id:'book1'}">foo bar baz</a>

Answer 2

您可以在数据中添加对象，并在html中使用该选项对象：

data: {
  optionsAttributes: {
     'id': 'someProp',
     'other-attr': 'otherProp'
  }
}

<a v-bind="optionsAttributes">foo bar baz</a>

添加样式：

data: {
  optionsStyles: {
     'color': 'blue',
     'font-size': '20px'
  }
}

<a v-bind:style="optionsStyles">foo bar baz</a>

Answer 3

如果您使用JSX，请尝试以下操作：

render(h) {
  const attributes= {
    attrs: {name: 'book', class: 'red', id: 'book1'},
    on: {}
  }

  return <div {...attributes}></div>
  // result: <div name='book' class='red' id='book1'></div>
}

属性接受：domProps，attrs，on，nativeOn和hook。

你能在vue.js中获得dyanmic（spreadable）attrubutes吗？

3 个答案: