<div id="root">
  <h1>
    Hello {{ name }}!<br>
  </h1>
  <p>
    <label>Your name</label>
    <input v-model="name" type="text" :class="[name.length < 3 ? 'red' : 'green']">
  </p>
  <div v-if="name.length < 3">
    You got a short name
  </div>
  <div v-else>
    Welcome to our website
  </div>
  <div>
    <button onclick="alert('Thankyou' + name)" :disabled="name.length < 3">
      Submit
    </button>
  </div>
  <hr>
  <input type="text" v-model="newKnight" v-on:keyup.enter="addKnight">
  <button v-on:click="addKnight">+ ADD</button>
  <list-knights :items="knights" />
</div>
.red {
  border: 2px solid red;
}
.green {
  border: 2px solid green;
}
Vue.component('list-knights', {
  props: ['items'],
  template: '<ol><li v-for="item in items">{{ item.name | capitalize }}</li></ol>'
})

new Vue({
  el: '#root',
  component: [
    'list-knights',
  ],
  data: {
    name: '',
    newKnight: '',
    knights: [
      { name: 'arthur'},
      { name: 'lancelot'},
      { name: 'percival'},
      { name: 'galahad'},
      { name: 'merlin'}
    ]
  },
  methods: {
    addKnight: function () {
      this.knights.push({name: this.newKnight})
      this.newKnight = ''
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js