Vue.js in Action

Chapter 5. Conditionals, looping, and lists

This chapter covers

• Working with the conditionals v-if and v-if-else
• Looping using v-for
• Looking at array changes

In the previous chapter, we saw the power of the v-model directive and how we can use it to bind inputs to our application. We constructed a checkout page that displayed all the input forms we needed to gather from the user. To display this page, we used a conditional statement.

In chapter 3, we created a checkout button bound to a click event method. This method toggles a property called showProduct. In our template, we used the v-if directive and the v-else directive. If showProduct was true, the product page was displayed; if showProduct was false, the checkout page was displayed. ...