Vue.js 2 Design Patterns and Best Practices

Adding secondary properties

If we also wanted to add another property to our class binding, we'd need to add another property (such as strikeThrough) to our data object like so:

data () { return {  red: false,  strikeThrough: false }}

We can then add another checkbox:

<input type="checkbox" v-model="strikeThrough"><span>Strike Through</span>

With an appropriate style:

<style>.red { color: red;}.strike-through { text-decoration: line-through;}</style>

Finally, we then need to adjust our binding to add the extra class like so:

<h1 v-bind:class="{ 'red': red, 'strike-through': strikeThrough }">Vue Bindings</h1>

Here's the results of checking both boxes: