1
Set up the Minimum Files Needed to Run Vue 3
2m 45s
2
Mount a Vue Application to the DOM and Render Reactive Data
2m 21s
3
Add Vue Devtools and Use Them to Help in Development
1m 10s
4
Interpolate JavaScript Expressions in Vue
2m 23s
5
Bind Reactive Properties to HTML Element Attributes
2m 23s
6
Render Content Conditionally with v-if in Vue
2m 8s
7
Render Arrays of Data as Lists with the Vue v-for directive
2m 6s
8
Respond to Events with the v-on (@) Directive in Vue
1m 30s
9
Define and Use Methods in the Vue Configuration Object for Complex Logic
2m 53s
10
Respond to a mouseover event in Vue with the v-on directive
2m 31s
11
Use Computed Properties in Vue to Be More Efficient
2m 14s
12
Conditionally Apply CSS Classes to Elements with v-bind in Vue
2m
13
Conditionally Apply an Array of CSS Classes to Elements in Vue
1m 49s
14
Create a Two Way Binding to Update Data Throughout an App with Vue v-model
1m 51s
15
Decide when to use a component in Vue
1m 33s
16
Build a Component and Pass Props to It in Vue
3m 35s
17
Create and Manipulate State within a Vue Component by Defining Methods and Properties
2m 27s
18
Send an Emit Event with Data From a Vue Component to It's Parent
3m 26s
19
Use Axios for Remote Data Fetching with Vue Mounted Property
1m 18s
20
Handle Errors when Data Fetching in Vue with Axios
1m 25s
21
Deploy a static site using Netlify's Drop
57s
22
Install the vue/cli
1m 55s
23
Refactor to use Vue files
2m 43s

Conditionally Apply CSS Classes to Elements with v-bind in Vue

Vue.js

Share this video with your friends

We'll see how we can add CSS classes conditionally to our HTML elements using the object syntax. We'll explore how different classes can be added atomically and that these can be built on top of a defined base class.

In this case, we'll check if our soldOut computed property is returning true and if it is we'll gray out the event image.

Conditionally Apply CSS Classes to Elements with v-bind in Vue

Share this video with your friends

Course

The Beginner's Guide to Vue 3