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. By clicking the checkout button, users can easily switch between these pages. In later chapters, we’ll look at refactoring this code to use components and routes, but for now this will work.
To expand our app, we’ll look at other types of conditionals. For example, we need to add a new feature that displays messages to the user based on available inventory levels. In addition, we need to add more products to our product page. We’ll look at that more closely in section 5.2.