Class binding

How we'll approach this is to dynamically bind thecontractedclass. Let's create acontracteddata propertyand set its initial value totrue.

app.js:

data: {
  ...
  contracted: true
}

Like our style binding, we can bind this class to an object. In the expression, thecontractedpropertyis the name of the class to be bound, thecontractedvalueis a reference to the data property of that same name, which is a Boolean. So if thecontracteddata propertyevaluates totrue, that class will be bound to the element, and if it evaluates to false, it will not.

index.html:

<p v-bind:class="{ contracted: contracted }">{{ about }}</p>

It follows that when the page loads the contracted class is bound:

<p class="contracted">...</p>