Following the previous homework exercise, you should try to expand it a bit. The user now types in his gender along with his name. If user is a male, then the heading will greet the user with "Hello Mister {{name}}". If user is a female, then "Hello Miss {{name}}" should appear instead.

When gender is neither male or female then the user should see the warning heading "So you can't decide. Fine!".


A logical operator would come handy to determine user title.


Example output


The example output makes use of Bootstrap. If you are not familiar with Bootstrap you can ignore it for now, it is covered in Chapter 4, List Rendering.

You can find ...

Get The Majesty of Vue.js now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.