Challenge 1 / 3

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?

:style="{
    width: collapsed ? '70px' : 'auto',
    color: darkMode ? 'white' : 'black',
    backgroundColor: darkMode ? 'black' : 'white',
}"

:style="[
    { width: collapsed ? '70px' : 'auto' },
    { color: darkMode ? 'white' : 'black' },
    { backgroundColor: darkMode ? 'black' : 'white' },
]"

:style="`width: ${collapsed ? '70px' : 'auto'}; color: ${darkMode ? 'white' : 'black'}; backgroundColor: ${darkMode ? 'black' : 'white'}`"

style="{
    width: collapsed ? '70px' : 'auto',
    color: darkMode ? 'white' : 'black'
    backgroundColor: darkMode ? 'black' : 'white',
}"

Rewatch the video