设置自定义属性名称

Question

使用 vue.js，是否可以设置自定义属性名称而不是属性值？ 下面的代码似乎不起作用。 它会呈现小胡子

伪代码：

<template v-for="item in list">

    <div myattr{{item.name}}="something">{{item.desc}}</div>

</template>

非常感谢任何帮助。

Answer 1

您可以使用自定义指令来做到这一点

HTML :

<div id="app">
  <li v-for="item in items">
    <div v-set-attribute="item">{{item.desc}}</div>
  </li>
</div>

JS ：

Vue.directive('set-attribute', {
  update: function(item) {
    this.el.setAttribute(item.name, "something");
  }
});

指令名称必须在 html 中以v-为前缀。 作为值（ "item" ）提供的对象被传递给指令的update函数。

JSFiddle