时间戳

首页 > 解决方案 > VueJS 根据条件将自定义指令绑定到循环组件

javascript - VueJS 根据条件将自定义指令绑定到循环组件

问题描述

假设我有一个这样的列表：

[{name: "test-a", directive: "v-testa"}, {name: "test-b", directive: "v-testb"}, {name: "test-c", directive: "v-testc"}]

我将遍历这个并想要这样的结果。

<ul>
 <li v-testa>test-a</li>
 <li v-testb>test-b</li>
 <li v-testc>test-c</li>
</ul>

如果我做这样愚蠢的事情，它就行不通了:)

<ul>
 <li v-for="item in list" item.directive>{{item.name}}</li>
</ul>

我怎样才能达到预期的效果？

标签： javascriptvue.jsvuejs2

解决方案

您可以这样做，但需要使用不同的v-bind语法。

您传递一个对象，其键是 HTML 属性名称。

您可以在运行时使用Computed property names对象初始化生成对象

尝试这个

<ul>
 <li v-for="item in list" v-bind="{[`${item.directive}`]: ''}">{{item.name}}</li>
</ul>

推荐阅读