Not binding the IF to any element in Vue

Question

This works:

<span v-if="name">
    Hi there, {{ name }}
</span>

... but it forces me to use span for the whole text, I just want it on the name variable. In handlebars for example I could do:

{{#if name}}
    Hi there, <span>{{ name }}</span>
{{/if}}

You could replace/wrap span with template. demo

tony19
– tony19

2018-02-15 01:02:09 +00:00
Commented Feb 15, 2018 at 1:02 — tony19
– tony19, Commented Feb 15, 2018 at 1:02

tony19 · Accepted Answer · 2022-07-15 21:02:10Z

5

You can use a template for that.

we can use v-if on a <template> element, which serves as an invisible wrapper. The final rendered result will not include the <template> element.

For example:

<template v-if="name">
  Hi there, <span>{{ name }}</span>
</template>

edited Jul 15, 2022 at 21:02

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 15, 2018 at 0:58

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not binding the IF to any element in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related