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>

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>

## Become a sponsor to PLBhoi