如何有條件地在 vue.js 中添加屬性？

Question

在vue中，我有這個

<v-dialog v-model="data_table.dialog">

我有一個可觀察的變量is_mobile 。 我想要它，以便上面的標簽看起來像這樣

<v-dialog v-model="data_table.dialog">

當is_mobile為假時。 看起來像這樣

<v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="data_table.dialog">

當is_mobile為真時。

我該怎么做？

我只知道如何設置屬性值，但是在這種情況下，我希望屬性本身是否包含在內，對於過渡，包含屬性和值或不包含屬性。 基本上就是上面顯示的結果，而不像fullscreen="true" / fullscreen="false" 。

謝謝

Answer 1

在 Vue.js 中，可以使用v-bind指令動態設置屬性或綁定。

例如上面它可以表示為一個計算屬性：

computed: {
  dialogBindings () {
    if (!this.is_mobile) {
      return {
        fullscreen: true,
        hideOverlay: true,
        transition: 'dialog-bottom-transition'
      }
    }
    return {}
  }
}

並在組件的模板中使用：

<v-dialog   
  v-model="data_table.dialog"
  v-bind="dialogBindings"
>