by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

Bind DOM elements to data - 1-way binding

Posted at — Jun 6, 2019

Let’s get bound in Vue.js:


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


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


<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>