add max length to input

by SnehalKadwe

HTML

<div id="app">
  <div>
    <input type="text" v-model="value" placeholder="enter your name"
    :maxlength="maxLength"> 
    <span>
     {{ maxLength - value.length}} / {{ maxLength }}
    </span>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}
input {
  border: 1px solid blue;
  padding:10px;
  border-radius: 4px;
  box-shadow: 5px 10px 18px #888888;
  margin-right: 20px;
}

Vue

new Vue({
  el: "#app",
  data: {
		maxLength: 10,
    value: ''
	}
})