Vue.js v-if 属性 [英] Vue.js v-if for attributes

问题描述

假设我有这个代码

table(my-attr="value")
    ...complex component Jade...

我想根据传递给组件的属性来渲染 my-attr .由于 v-if 适用于整个元素，我不能做类似

and I would like render that my-attr base on property delivered into component. Since v-if works on whole element I cannot do something like

table(my-attr="value", v-if="myProp")
table(v-else)

因为我必须复制表格中的所有代码.

because I would have to duplicate all the code inside table.

我怎样才能做到这一点?

How can I achieve that?

推荐答案

您可以使用 v-bind 或直接使用 {{}}

You can use v-bind or interpolate the value directly with {{}}

// (sorry, no jade)
<table v-bind:attribute1="someMethod" attribute2="{{anotherMethod}}">

现在 someMethod 和 anotherMethod 应该是组件的数据、计算属性或方法，并且应该返回属性的期望值或 false.在后一种情况下，该属性根本不会添加到元素中.

Now someMethod and anotherMethod should be data, computed properties, or methods of your component, and should return either the attribute's desired value or false. In the latter case, the attribute will not be added to the element at all.

更新:请注意，Vue 2 中删除了属性中的插值

Update: Note that interpolations in attributes have been removed in Vue 2

这篇关于Vue.js v-if 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！