如何在vuejs中为元素动态添加多个属性

Question

我正在尝试一种动态添加多个属性的方法。下面是一个模型代码。如果我循环浏览属性并尝试将其添加到img标记中，那么我将有多个我不想要的图像标记。我希望数组中的所有属性都在同一个元素上。

如有任何帮助，我们将不胜感激。

<template>
<img />
</template>
<script>
export default {
data(){
attributes: [
{class: 'main'},
{src: '/somthing/img.jpg'}
]
}
}
</script>

Answer 1

您可以为此目的使用v-bind。示例：

<template>
<img v-bind="attributes"/>
</template>
<script>
export default {
data(){
return {
attributes: {
class: 'main',
src: '/somthing/img.jpg'
}
}
}
}
</script>

如果您还想动态绑定事件的侦听器，您可以像使用v-bind一样使用v-on