属性的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
,也可以是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 原则的内容都不应分享。以上是关于属性的vue.js条件渲染[重复]的主要内容,如果未能解决你的问题,请参考以下文章