Let's say I have this code

table(my-attr="value")
    ..plex ponent Jade...

and I would like render that my-attr base on property delivered into ponent. 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?

Let's say I have this code

table(my-attr="value")
    ...plex ponent Jade...

and I would like render that my-attr base on property delivered into ponent. 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?

• javascript
• vue.js

1 Answer 1

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

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

Now someMethod and anotherMethod should be data, puted properties, or methods of your ponent, 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.

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