Binding Attributes
A little HTML, CSS, & JavaScript knowledge if recommended for this course.
To follow along, the starter folder is located in The Vue instance lesson.
Binding Attributes
We had a first look at binding attributes in the previous lesson using the key attribute. We will now discover binding class and style attributes. To do this, we will create a dark mode for our site, which the user can toggle on or off.
In the stylesheet, add some simple dark mode CSS:
/* styles.css */
.dark {
background: #38383a;
color: whitesmoke;
}
And add this to our site as a regular HTML class. Since we want dark or regular mode to apply to the full page, we will add this to the div inside the body tag:
<!-- index.html -->
<body>
<div class="dark">
This works fine but we need a way to toggle this on and off, and integrate it into our Vue instance. Currently, we are using Vue to control the header and blog sections, but our dark mode class is applied inside the body.
We can simplify things by merging these two Vue apps. Replace the two createApp sections with the following:
Vue.createApp({
data() {
return {
name: "Homer Simpson",
links: ["home", "portfolio", "contact me"],
posts: posts,
};
},
}).mount("body");
And then add a darkModeSet data property to determine if the dark mode should be enabled:
data() {
return {
name: "Homer Simpson",
links: ["home", "portfolio", "contact me"],
posts: posts,
darkModeSet: false,
};
},
This will initially be false, and soon we will set things up so the user can toggle. To dynamically toggle the dark class based on this data property, we can pass our class attribute an object:
<div class="{dark: darkModeSet}">
And now this dark class will only be set if the data property is true, ours is currently false so lets change this:
darkModeSet: true,
Try this by refreshing the browser. You will notice no change in the browser.
The reason for this is the same as previously looked at when using the key attribute. Since this is a regular html class attribute, it will read this as a plain string of text.
Binding classes
To ensure the class is dynamic and can read our data property variable, we use v-bind:
<div v-bind:class="{dark: darkModeSet}">
Or the shorthand version:
<div :class="{dark: darkModeSet}">
Try this again and you should see the dark styles applied in the browser.
Reinstate darkModeSet back to false:
darkModeSet: false,
Binding Styles
We can also use data variables with inline styles. A regular HTML style attribute looks like this (remove previous class attribute):
<div style="color: hotpink;">
We can also move the color property to our data property:
Vue.createApp({
data() {
return {
name: "Homer Simpson",
links: ["home", "portfolio", "contact me"],
posts: posts,
darkModeSet: true,
textColor: "hotpink" // set new data property
};
},
}).mount("body");
And as with the class attribute, we pass style an object:
<div :style="{color: textColor}">
If we have multiple style properties this can quickly get messy, so we can remove this:
<div :style="">
And create a style object as a data property (remove textColor data property):
// script.js
return {
name: "Homer Simpson",
links: ["home", "portfolio", "contact me"],
posts: posts,
darkModeSet: true,
// textColor: "hotpink"
darkMode: {
background: "#38383a",
color: "whitesmoke",
},
};
And pass in our object directly:
<div :style="darkMode">
Refresh the browser and our dark styles will apply.
We can even add multiple styles objects too. For example, if we had some base styles like this:
// script.js
return {
name: "Homer Simpson",
links: ["home", "portfolio", "contact me"],
posts: posts,
darkModeSet: true,
darkMode: {
background: "#38383a",
color: "whitesmoke",
},
base: {
fontFamily: "monospace",
},
};
They can also be added to our style attribute as an array:
<div :style="[darkMode, base]">
And next we have a little challenge to try out some of these things you have learned so far.