Join Michael Sullivan for an in-depth discussion in this video Adding dynamic class attributes, part of Learning Vue.js.
- [Instructor] In the last video we looked…at inline style bindings, and now,…we're gonna take a quick look at CSS class bindings.…They have a similar syntax, but the main thing we'll do…with classes is just toggle them,…that is, turn them on and off.…So let's remove the style attributes for now.…We'll first just recreate the CSS…in our getRowStyle method using a class.…So for example, if I go back up to the top…and create a class up here called highlight…with the same properties and values.…
We'll just wanna remove the single quotes…and change the commas to semicolons.…Now, if I wanted to apply this class to every row,…I can bind an object to class like this…with a key named highlight that has the value true.…And once again, we have every row highlighted.…To turn it off, I can make it false, but generally,…instead of a hard-coded Boolean value, it would be dynamic.…
And we can use a similar approach…as before by creating a method,…but this time it just needs to return true or false,…since all of the CSS is specified in a style tag above.…
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI
Skill Level Intermediate
Web Programming Foundationswith Morten Rand-Hendriksen58m 44s Beginner
What you should know1m 29s
1. The Simplest Form
2. Essential Directives, Options, and Tools
3. Enhancing User Interfaces
4. Vue Components
Next steps2m 32s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.