Create a Basic Component using Vue.js

Create a List Component in Vue.js

Create Filters in Vue.js

Use Vue.js Component Computed Properties

Use Vue.js Watchers to Respond to Async Updates

Update Attributes, Classes and Styles in Vue.js with v-bind

Conditionally Render DOM Elements in Vue.js 

Handle DOM Events in Vue.js with v-on

Bind Values to Input Fields in Vue.js

Build Reusable Vue.js Components

Dynamic Vue.js Components with the component element

Develop Basic Web Apps with Vue.js

You can use `v-if` and `v-else` to display content based on assertions on your data. Similarly, `v-show` can be used to render the content, but hide it with css. `v-if` can also be used on an invisible wrapper `<template>` element. 

[00:00] Here's a list of Dinosaurs. Let's prevent the heading from rendering, if there's no list. We'll add v-if, and set that to the comparison, ="dinos.length > 0Now, our heading will be hidden if there are no Dinosaurs. That leaves the markup for the list. Let's create a new element called "template," and move our v-if statement onto it.

[00:20] The element template won't be rendered in the view, but everything inside it will now be conditionally rendered. If there isn't a list, we want to show a message.

[00:29] Let's create a paragraph tag with v-else, and give it some text. A v-else element will be rendered, if the previous v-if wasn't.

[00:38] Now, we want to conditionally show the addition and subtraction button, based on the quantity of that species. For the addition button, let's add v-show, and set it equal to "dino.quantity < 5".

[00:50] For the subtraction, we'll set v-show= "dino.quantity > 1". v-show allows the element to be rendered in the view, and to be shown, or hidden with CSS.

Course

Develop Basic Web Apps with Vue.js

Conditionally Render DOM Elements in Vue.js

Share this video with your friends