Question

我在组件内部有一个输入，希望传递任意数量的属性取决于使用情况：

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

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

Answer 1

元素具有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))
})

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

Answer 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>

Answer 3

您可以使用类似vuejs的渲染功能

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

Answer 4

这是动态设置属性的方式。 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 个答案: