Questions And Answers

More Tutorials

VueJs Data Binding



The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):
<span>Message: {{ msg }}</span>

The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.

You can also perform one-time interpolations that do not update on data change:
<span>This will never change: {{* msg }}</span>


The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches:
<div>{{{ raw_html }}}</div>

The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use partials.


Mustaches can also be used inside HTML attributes:
<div id="item-{{ id }}"></div>

Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places.


Vue.js allows you to append optional “filters” to the end of an expression, denoted by the “pipe” symbol:
{{ message | capitalize }}

Here we are “piping” the value of the message expression through the built-in capitalize filter, whichis in fact just a JavaScript function that returns the capitalized value. Vue.js provides a number of built-in filters, and we will talk about how to write your own filters later.

Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix filters inside expressions; you can only append them at the end of an expression.
Filters can be chained:
{{ message | filterA | filterB }}

Filters can also take arguments:
{{ message | filterA 'arg1' arg2 }}

The filter function always receives the expression’s value as the first argument. Quoted arguments are interpreted as plain string, while un-quoted ones will be evaluated as expressions. Here, the plain string 'arg1' will be passed into the filter as the second argument, and the value of expression arg2 will be evaluated and passed in as the third argument.


In this page (written and validated by ) you learned about VueJs Data Binding . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Dynamic Components.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.