Question

我正在尝试使用Vue.js（2.3）。我很熟悉手动进行属性绑定，例如

Vue.component('my-component', {
    props: ['info'],
    computed: {
        type: function() { return info.type },
        classList: function() { return this.info.attributes.classList },
        id: function() { return this.info.attributes.id }
    }
    template: '<component :is="type" :class="classList" :id="id">{{ info.text }}</component>'
})

其中info =

{
    text: 'Some text',
    type: 'h2',
    attributes: {
        classList: 'a string',
        id: 'another-string'
    }
}

这将输出以下内容：

<h2 class="a string" id="another-string">Some text</h2>

但是如果我想绑定属性对象中的所有属性，无论它们有多少或者是什么，例如我的信息可能如下所示：

{
    text: 'Some text',
    type: 'td'
    attributes: {
        classList: 'a string',
        id: 'another-string',
        colspan: '3',
        rowspan: '2',
        title: 'A string',
        ...
    }
}

如何绑定所有这些属性而不必列出可能出现的所有可能属性？

Answer 1

v-bind接受一个对象作为它的参数，并将所有属性绑定到它们的值。

template: '<component :is="type" v-bind="info.attributes"></component>'

Vue.js属性从列表或对象绑定

1 个答案: