如何使用 VueJS 動態添加屬性？

Question

我知道我可以使用v-bind為屬性動態設置值，但是我想動態添加屬性，而不是值。 像這樣的東西（雖然這是無效的）：

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

注意：我沒有使用 JSX

我正在考慮使用$attrs ( https://v2.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 為真，那么屬性disabled將被添加到元素中，否則將被移除。 此機制不適用於非布爾值的其他屬性。

您可以為此目的使用 Javascript -

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

Answer 2

如果您希望它看起來像：

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

只有當downloadable為真時download才可見，您實際上可以使用v-bind來做到這一點：

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

您可以通過將downloadable更改為 true 或 false 並檢查元素來檢查它是否有效。