Before venturing to prepare this recipe, be sure to familiarize yourself with the v-model directive and the @event notation. You can complete the React to events like clicks and keystrokes recipe in the preceding chapter if you are unsure.

A simple example will clarify what a computed property is:

<div id="app"> 
  <input type="text" v-model="name"/> 
  <input type="text" id="surname" value='Snow'/> 
  <button @click="saveSurname">Save Surname</button> 
  <output>{{computedFullName}}</output> 
</div> 

let surname = 'Snow' 
new Vue({ 
  el: '#app...

You should have some familiarity with Vue lists and know the basics of computed properties; if you don't, the Writing lists and Learning how to use computed properties recipes will get you covered.

To get started with this recipe, we need an example list from which to filter our favorite elements. Let's suppose we work for the ACME Research and Development...

To complete this recipe, you just require some familiarity with lists and computed properties; you can brush up on them with the Writing lists and Learning how to use computed properties recipes.

Let's write a list of the largest dams in the world.

First, we need an HTML table with three columns (Name, Country, Electricity):

<div id="app"> 
<table> 
  <thead> 
    <tr> 
      <th>Name</th> 
      <th>Country</th> 
      <th>Electricity</th> 
    </tr> 
  </thead> 
  <tbody> 
  </tbody> 
&lt...

The basics of filtering are explored in the Formatting your text with filters recipe; where you build a basic filter ensure that you complete that, then come back here.

Add accounting.js to your page. Refer to http://openexchangerates.github.io/accounting.js/ for more details on how to do it. If you are using JSFiddle though, you can just add it as an external resource to the left menu. You can add a link to CDN, which is serving it, for example, https://cdn.jsdelivr.net/accounting.js/0.3.2/accounting.js.

This filter will be extremely simple:

Vue.filter('currency', function (money) { 
  return accounting.formatMoney(money) 
})

You can try it out with a one-liner in HTML:

I have {{5 | currency}} in my pocket

It will default to dollars, and it will print I have $5.00 in my pocket.

Before moving ahead, make yourself more comfortable with filters by going through the Formatting your text with filters recipe in Chapter 1, Getting started with Vue.js ; if you already know filters, keep reading.

Let's say we are curating an interactive page to learn history. We have our Vue instance with the following JavaScript code:

new Vue({ 
  el:'#app', 
  data: { 
    bastilleStormingDate: '1789-07-14 17 h' 
  } 
})

In our data, we have a date written informally as a string in our instance data. Our HTML can contain a timeline of the French Revolution and, at some point, can contain the following:

<div id="app"> 
  The Storming of the Bastille, happened on ...

Before venturing into this recipe, ensure that you know enough about computed properties or take a look at the Filtering a list with a computed property recipe.

Let's build a ghost that is only visible at night:

<div id="ghost"> 
  <div v-show="isNight"> 
    I'm a ghost! Boo! 
  </div> 
</div>

The v-show guarantees that the <div> ghost will be displayed only when isNight is true. For example, we may write as follows:

new Vue({ 
  el: '#ghost', 
  data: { 
    isNight: true 
  } 
})

This will make the ghost visible. To make the example more real, we can write isNight as a computed...

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