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

Posted

技术标签:

【中文标题】属性的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,也可以是nullundefined【参考方案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 原则的内容都不应分享。

以上是关于属性的vue.js条件渲染[重复]的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js - 无法读取未定义的属性“推送”[重复]

无法在 Vue.js 中设置未定义的属性“产品”[重复]

Vue.js:尽管有条件渲染,元素仍会显示片刻

VUE.js高级

Vue.js 删除渲染函数中的 contenteditable 属性

Vue.js学习