DEV Community 👩‍💻👨‍💻

Pritesh Bhoi
Pritesh Bhoi

Posted on • Updated on • Originally published at github.com

Vue Js Binding text and HTML

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Attribute Bindings

Mustache cannot be used in HTML attributes. Use the v-bind directive instead:

<div v-bind:id="dynamicId"></div>
Enter fullscreen mode Exit fullscreen mode
  • Shorthand

Because v-bind is so commonly used, it has a dedicated shorthand syntax:

<div :id="dynamicId"></div>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • Dynamically Binding Multiple Attributes

If you have a JavaScript object representing multiple attributes

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

## Become a sponsor to PLBhoi

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠