Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at inline style bindings and v-if.
Binding Inline Styles
There’re various ways to bind inline styles to an element.
One way is to pass in an object to the :style directive.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :style="{ color, fontSize: `${fontSize}px` }">
hello
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
color: "red",
fontSize: 30
};
}
}).mount("#app");
</script>
</body>
</html>
We have the color and fontSize properties in the object we return in the data method.
Then we used that in the object we use as the value of the :style directive.
So ‘hello’ should be red and 30px in size.
We can replace that with an object to make the template shorter.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :style="styleObj">
hello
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
styleObj: {
color: "red",
fontSize: "30px"
}
};
}
}).mount("#app");
</script>
</body>
</html>
There’s also an array syntax to let us add multiple style objects to the same element.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :style="[baseStyles, overridingStyles]">
hello
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
baseStyle: {
color: "red",
fontSize: "30px"
},
overridingStyles: {
color: "green"
}
};
}
}).mount("#app");
</script>
</body>
</html>
We have the baseStyles and overridingStyles in one array.
The styles in overridingStyles will override the styles in baseStyle completely.
So we get that the text is green and it’s in its default size.
If browser-specific prefixes are needed, then they’ll be added automatically.
We can also provide an array of values to a style property with an array.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
hello
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {};
}
}).mount("#app");
</script>
</body>
</html>
We have all the variants of flex in the array.
Conditional Rendering
We can add conditional rendering with the v-if directive.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="on = !on">toggle</button>
<h1 v-if="on">hello world!</h1>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
on: true
};
}
}).mount("#app");
</script>
</body>
</html>
We have the on property returned with the object we return indata , so we can use it with v-if to conditionally render the h1 element.
Also, we have a button to toggle on between true or false so that we’ll see the h1 toggled on and off as we click the button.
Conclusion
Inline styles can be added with the :style directive.
It takes an object or an array.
We can use v-if to conditionally render an element.
