属性的vue.js条件渲染[重复]

Posted 2023-02-22

【中文标题】属性的vue.js条件渲染[重复]

【英文标题】：vue.js conditional rendering of an attribute [duplicate]

【发布时间】：2017-05-31 14:17:11

【问题描述】：

我想了解在 Vue.js 中有条件地呈现 html 属性的最佳方法是什么。例如，如果有当前实例的工具提示消息，则添加 data-toggle="tooltip"。

我现在的代码：

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
  :title="col.col_spec.tooltip"
>
   col.col_spec.title 
</span>

不过，我不太喜欢第 2 行...即使我在这里使用计算属性，当没有可显示的工具提示时，我宁愿根本没有 data-toggle 属性。

【问题讨论】：

如果在没有工具提示的情况下您根本不希望该属性存在，那么我可能不会在模板中这样做，而是在mounted() 或类似的东西中这样做。跨度>

@str 不完全正确。 “必需”是一个“布尔属性”，它有点简单。我的问题涉及“一般属性”。

@pilat 不，完全一样。虽然required 确实是boolean attribute，但您不能将false 值传递给它。 “元素上的布尔属性的存在表示真值，而属性的缺失表示假值。” 使用它的唯一方法是将它放在 DOM 中，或者不要。

好吧，看起来不管它是什么类型的属性，如果它传递了'false'，它就不会被渲染。正是我需要的！ jsbin.com/lamudoqucu/edit?html,js,output

【参考方案1】：

非常优雅的解决方案：

<span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
  :title="col.col_spec.tooltip"
>
   col.col_spec.title 
</span>

是的，是的，是的，只是需要没有空字符串，而是布尔值false

【讨论】：

此答案是有条件地添加属性的唯一好方法和officially recommended 方法。但是，要删除该属性，它不一定必须是false，也可以是null 或undefined。

【参考方案2】：

类似：

<span ref="column">
   col.col_spec.title 
</span>

在 Vue 中：

mounted()
    if (this.col.col_spec.tooltip)
      this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
    

【讨论】：

非常干净的做法

如果this.col.col_spec.tooltip 发生变化，该属性将完全不会反应......并且有时组件不会重新安装，例如。如果 vue-router 停留在相同的路由/页面（相同的组件）但转到新页面（不同的数据/url）。就像从 #/post/1 导航到 #/post/2。

【参考方案3】：

有点晚了，但这是我的看法：

HTML：

<span
  :data-toggle="tooltip"
  :data-original-title="tooltipTitle"
>
   tooltipTitle 
</span>

Vue：

methods: 
    tooltipTitle: function() 
        var title = this.col.col_spec.title;
        if (!!title) return title;
        return false;
    

如果没有可显示的“data-original-title”属性，这将删除，从而完全删除工具提示。您必须使用“data-original-title” 而不仅仅是“title”，因为 Bootstrap 会在您初始化“title”属性后自动添加它，并且将“title”更改为 false 不会删除“data-original-title”。

【参考方案4】：

这是另一个有效但不那么优雅的解决方案：

<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
     col.col_spec.title 
</span>
<span v-else >
     col.col_spec.title 
</span>

【讨论】：

恕我直言，任何违反 DRY 原则的内容都不应分享。