Vue.js 2 Cookbook

How to do it...

We will build a text area that warns you when you are reaching the maximum allowed number of characters:

<div id="app">   <textarea     v-model="memeText"     :maxlength="limit">   </textarea>   {{memeText.length}} </div>

The text written inside will be bound to the memeText variable and the length of our text is written at the end via mustaches.

We want to change the background color when only 10 characters are left. For this, we have to bake a little CSS class warn:

.warn {   background-color: mistyrose }

We will use this class on the textarea to signal the imminent alt on writing. Let's take a look at our JavaScript:

new Vue({   el: '#app',   data: {     memeText: 'What if I told you ' +               'CSS can do that',     limit: 50   } })

This ...