Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

v-on & methods: User Interaction

Buy Access to Course
Next Chapter

Challenge #1 of 3

Q: 

Let's imagine we have these two boolean variables: collapsed and darkMode and we want to change the width and color of an element based on the state of these. What is the correct way to accomplish this using a style attribute?

a) 
:style="{
    width: collapsed ? '70px' : 'auto',
    color: darkMode ? 'white' : 'black',
    backgroundColor: darkMode ? 'black' : 'white',
}"
b) 
:style="[
    { width: collapsed ? '70px' : 'auto' },
    { color: darkMode ? 'white' : 'black' },
    { backgroundColor: darkMode ? 'black' : 'white' },
]"
c) 
:style="`width: ${collapsed ? '70px' : 'auto'}; color: ${darkMode ? 'white' : 'black'}; backgroundColor: ${darkMode ? 'black' : 'white'}`"
d) 
style="{
    width: collapsed ? '70px' : 'auto',
    color: darkMode ? 'white' : 'black'
    backgroundColor: darkMode ? 'black' : 'white',
}"
Rewatch Video
userVoice