循环输出输入属性？答案

【问题标题】：Looping out input attributes?循环输出输入属性？
【发布时间】：2019-07-23 09:49:20
【问题描述】：

我在组件中有一个输入，并希望传入任意数量的属性视使用情况而定：

<input type="text" data-a="a" data-b="b" data-c="c">

我有一个带有属性的道具，但是如何将它们循环出来以在输入上构建属性？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

你可以像使用 vuejs 渲染函数

Vue.component('child', {
  data() {
    return {
      attrs: {
        'data-a': 'a',
        'data-b': 'b',
        'data-c': 'c'
      }
    }
  },
  render(h) {
    return h('input', {
      attrs: {
        ...this.attrs
      }
    })
  }
});

【讨论】：

【解决方案2】：

您可以使用v-bind 指令设置元素的属性，该指令可以传递一个对象，其中每个键是属性，值是属性的值。

您说您正在传递您想要绑定为道具的属性。由于您没有指定，我将假设您的数据结构（如果这不是您的数据结构，则需要创建一个计算属性来以这种方式格式化您的数据）：

{ 'data-a': 'a', 'data-b': 'b', 'data-c': 'c' }

然后，假设您的道具名称是attrs，您只需使用v-bind 将属性添加到输入中，如下所示：

<input type="text" v-bind="attrs">

这是一个例子：

Vue.component('child', {
  template: `<input type="text" v-bind="attrs">`,
  props: {
    attrs: { Object, default: () => ({}) }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      myAttrs: {
        'data-a': 'a',
        'data-b': 'b',
        'data-c': 'c',
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child :attrs="myAttrs"></child>
</div>

【讨论】：

【解决方案3】：

这是动态设置属性的方法。 Fiddle

模板 =>

<div id="app">
  <p class="text" v-bind="options">{{ message }}</p>
</div>

脚本 =>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    propName: 'hello'
  },
  computed: {
    options() {
      return {
        [`data-${this.propName}`]: this.message
      }
    }
  }
})

【讨论】：

【解决方案4】：

元素有一个dataset 属性。您可以使用Object.keys 对其进行迭代。如果你想迭代元素的所有属性，使用getAttributeNames()方法。

var el = document.getElementsByTagName('input')[0]

// data-* attributes
Object.keys(el.dataset).forEach(key => {
  console.log('data-' + key, el.dataset[key])
})

// all attributes
el.getAttributeNames().forEach(name => {
  console.log(name, el.getAttribute(name))
})

&lt;input type="text" data-a="a" data-b="b" data-c="c"&gt;

【讨论】：

好的，但是如果属性不只是数据集的一部分呢？
然后你可以使用getAttributeNames()方法。我已经更新了我的帖子。