Question

在公开中，我有这个

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

如何在vue.js中有条件地添加属性？

1 个答案: