CODEWITHSUNDEEP
vue.js
once
once

Reputation: 1399

Vue multiple properties inside mustaches

Is it possible to place multiple properties inside mustaches (curly brackets)?

All below code wont work properly (assume first and second are string/integer):

<p>Using mustaches: {{ first,second }}</p>
<p>Using mustaches: {{ first second }}</p>
<p>Using mustaches: {{ first+second }}</p>

It works using more mustaches:

<p>Using mustaches: {{ first }},{{ second }}</p>

Upvotes: 0

Views: 1250

Answers (1)

skirtle
skirtle

Reputation: 29122

The contents are just an expression. It's pretty much just normal JavaScript but with identifiers scoped to this and support for Vue filters tagged on the end.

e.g.

<p>{{ first + second }}</p>
<p>{{ first + ' ' + second }}</p>
<p>{{ first + ' comes before ' + second }}</p>
<p>{{ 1 + 2 + 3 + 4 }}</p>
<p>{{ methodCall(first, second) }}</p>
<p>{{ first || second || 'none' }}</p>
<p>{{ first | formatWithAFilter }}</p>

If the expression evaluates to a primitive (strings, numbers, etc.) it will be output using the usual string representation. null and undefined are treated like empty strings (similar to Array join). For an object it will be dumped out as JSON, which can be useful for debugging.

Upvotes: 4

Related Questions