How to use :class Binding In Vue
In this approach, we are using the :class binding. The background image is dynamically changed based on the user’s click. The variable selectImg is updated through the button clicks and determines which predefined background image class to apply.
Syntax:
<div :class="{ 'class-name': condition, 'another-class': anotherCondition }"></div>
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html><head> <title> Example 2 </title> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script> <style> .background-image { width: 300px; height: 200px; background-size: cover; background-position: center; } #app{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .image-1 { background-image: url('https://media.w3wiki.org/wp-content/uploads/20230816191453/gfglogo.png'); } .image-2 { background-image: url('https://media.w3wiki.org/wp-content/cdn-uploads/20210908212955/Get-Hired-With-w3wiki-GFG-Job-Portal.png'); } .image-3 { background-image: url('https://media.w3wiki.org/wp-content/uploads/20231004184219/gfglogo0.jpg'); } </style></head><body> <div id="app"> <h1 style="color: green;"> w3wiki </h1> <h3> Approach 2: Using :class Binding </h3> <div :class="{ 'background-image': true, 'image-1': selectImg === 'image-1', 'image-2': selectImg === 'image-2', 'image-3': selectImg === 'image-3' }"> </div> <div> <button @click="selectImage('image-1')"> Image 1 </button> <button @click="selectImage('image-2')"> Image 2 </button> <button @click="selectImage('image-3')"> Image 3 </button> </div> </div> <script> new Vue({ el: '#app', data: { selectImg: 'image-1' }, methods: { selectImage(image) { this.selectImg = image; } } }); </script></body></html> |
Output:
How to Pass Variable to Inline Background Image in VueJS ?
In this article, we will learn how we can pass variables to inline background images in VueJS. We will explore two different approaches with practical implementation in terms of examples and outputs.
Table of Content
- Using :style Binding
- Using :class Binding