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

【问题标题】：How to conditionally add attributes in vue.js?如何有条件地在 vue.js 中添加属性？
【发布时间】：2019-04-13 07:12:45
【问题描述】：

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

谢谢

【问题讨论】：

VueJS conditionally add an attribute for an element的可能重复
你能把这两个都放进去，然后加上 v-if="is_mobile" 来条件渲染正确的元素吗？
是的，但是标签的内容很多，不想重复两次。
@ChrisG 仍然将值 true 或 false 添加到属性，它实际上并没有删除或保留它。
在我看来，您必须在 JS 中的方法或计算中添加转换。

标签： javascript vue.js vuejs2

【解决方案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"
>

【讨论】：