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

Posted 2023-02-22

【中文标题】如何有条件地在 vue.js 中添加属性？

【英文标题】：How to conditionally add attributes in 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 中的方法或计算中添加转换。

【参考方案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"
>