Question

我知道我可以使用v-bind动态地为属性设置值，但是我想动态地添加属性，而不是值。像这样的东西（尽管这是无效的）：

    <a
      :href="url"
      {{ downloadable ? 'download' : null }}
      class="link"
      @click="onClick">
      {{ text }}
    </a>

注意：我没有使用JSX

我当时正在考虑使用$attrs（https://vuejs.org/v2/api/#vm-attrs），但这是只读的。

有没有办法在Vue上做到这一点？

解决方案：

JavaScript：

new Vue({
  el: '#app',
  data() {
    return {
       msg: 'Inspect element to test',
       downloadable: true
    }
  },
  computed: {
    dynamicAttribute() {
      if(!this.downloadable) {
         return null
      }

      return { [`download`]: "link or w/e" }
    }
  }
})

HTML：

  <a v-bind="dynamicAttribute">{{msg}}</a>

Answer 1

除布尔属性外，您无法使用Vue.js动态添加或设置属性。例如-

v-bind:disabled="isActive"

如果isActive为true，则将 disabled 属性添加到该元素，否则将其删除。此机制不适用于非布尔值的其他属性。

您可以为此使用Javascript-

element.setAttribute('attributeName', 'value');

Answer 2

如果您希望它看起来像这样：

<a ... download="value">text</a>

只有在download为真时，downloadable才可见，实际上您可以使用v-bind来做到这一点：

https://jsfiddle.net/eywraw8t/274691/

您可以通过将downloadable更改为true或false并检查元素来检查其是否有效。

如何使用VueJS动态添加属性？

2 个答案: