Event listener

We now want to remove thecontractedclass automatically when the user clicks theMorebutton. To do this job, we'll use thev-ondirective, which listens to DOM events with aclickargument.

The value of thev-ondirective can be an expression that assignscontractedtofalse.

index.html:

<p class="about">
  <h3>About this listing</h3>
  <p v-bind:class="{ contracted: contracted }">{{ about }}</p>
  <button class="more" v-on:click="contracted = false">+ More</button>
</p>