Bind DOM elements to data - 1-way binding - #todayilearned

Bind DOM elements to data - 1-way binding

Posted at — Jun 6, 2019

Let’s get bound in Vue.js:

TEXT:

<span>Message: {{ msg }}</span>
<!-- or -->
<div v-text="todo.text"> to replace an elements’s text contents</div>

HTML

<b v-html="someCoolHtml"></b>

Attributes

<div v-bind:class=“{ completed: todo.isDone }”>
<!-- or the shorthand form: -->
<input :title="modus.ponens">

Boolean Attributes

<!-- NOTE:
  If isButtonDisabled is null, undefined, or false, the disabled
  attribute will *not even be included* in the rendered element. 
  -->
<button v-bind:disabled="isBtnDisabled">Go</button>

Vue.js