Vue attributes

v-once, v-text, v-html, ternary operations, v-bind

by yash009

HTML

<div id = "root">
  Sign up
  <p v-text="email">
  <p v-once>{{ email }}</p>
  <p v-html="email2">
  </p>
  <br><br>
  <input v-model = "email" :class="{red: email.length <2}">
  <br><br>
  <input v-model = "email2" :class="[email2.length < 2 ?'red' : 'green']">
  <br><br>
  <button onClick="alert('signed up')"
  v-bind:disabled="email.length < 2">
    submit
  </button>
</div>

CSS

.red {
  border: 2px solid red;
}
.green {
  border: 2px solid green;
}

JavaScript

new Vue ({
	el:'#root',
  data: {
		email:  '[email protected]',
    email2: ''
  }
})