Vue uses an HTML-based template syntax that allows you to declarative bind the rendered DOM to the underlying component instance's data.
Text Interpolation
The most basic form of data binding is text interpolation using the "mustache" syntax (double brackets):
<span>Message: {{ msg }}</span>
Raw HTML
Double mustache interpret data as plain text, not HTML. To display native HTML, you need to use the v-html directive:
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Attribute Bindings
Mustache cannot be used in HTML attributes. Use the v-bind directive instead:
<div v-bind:id="dynamicId"></div>
- Shorthand
Because v-bind is so commonly used, it has a dedicated shorthand syntax:
<div :id="dynamicId"></div>
- Boolean Attributes
Boolean attributes are attributes that can indicate true / false values by its presence on an element.
For example, disabled is one of the most commonly used boolean attributes.
<button :disabled="isButtonDisabled">Button</button>
- Dynamically Binding Multiple Attributes
If you have a JavaScript object representing multiple attributes
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
Using JavaScript Expressions
So far we've only tied a simple property key in our template. But Vue actually supports the full power of JavaScript expressions across all data bindings:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
Directives
Directives are special attributes that start with v-. Vue comes with a number of built-in directives, including v-html and v-bind, which we introduced above.
<p v-if="seen">Now you see me</p>
Top comments (0)