Adjust the Vue.js background color according to a specified class name

Question

Adjust the Vue.js background color according to a specified class name

Just starting out with vue.js and exploring the possibilities. I have a scenario where I need to dynamically change the background color based on a class name in vue. Is there a way to achieve this without relying solely on CSS? Ideally, I would like to simply update the class name in the HTML markup and have the associated background color render automatically.

HTML:

<div class="page-header__container" :style="{ background: color }">
    <div class="container">
      <div class="row">
        <div class="page-header">
          <h1 class="page-header__text">
            Page Header Lorem ipsUm
          </h1>
</div>

js:

export default {
   name: 'Header',
   data() {
   return {
   color: '#333'
    };
   }
 };

css:

bg-one{
background-color: #673AB7
}
bg-two{
background-color: #7293A0
}
bg-three{
background-color: #45B69C
}

javascript html css vue.js

Answer 1

Answer №1

Check out this code on JSFiddle: https://jsfiddle.net/kyz19b7r/

Creating a new Vue instance:
new Vue({
  el: "#app",
  data: {
    bgColour: 'blue',
    classes: [ 'blue', 'red', 'green' ]
  }
})

CSS styling for the app:
body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

Vue template:
<div id="app" :class="bgColour">
  <select v-model="bgColour">
    <option v-for="myClass in classes" :value="myClass">{{ myClass }}</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

Check out this code on JSFiddle: https://jsfiddle.net/kyz19b7r/

Creating a new Vue instance:
new Vue({
  el: "#app",
  data: {
    bgColour: 'blue',
    classes: [ 'blue', 'red', 'green' ]
  }
})

CSS styling for the app:
body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

Vue template:
<div id="app" :class="bgColour">
  <select v-model="bgColour">
    <option v-for="myClass in classes" :value="myClass">{{ myClass }}</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Adjust the Vue.js background color according to a specified class name

Answer №1

Similar questions

Integrating AngularJS code into dynamically generated HTML using JavaScript

Animate or resize with a focal point

Top recommendations for implementing private/authentication routes in NextJS 13

Is there a way to verify the location of an element?

Having trouble with the DataTables jQuery plugin? Seeing a blank page instead of the expected results?

Transmitting information after a delay when using ng-keyup in AngularJS

Tips for fixing the error "Unhandled error: state.set is not a function"

How to implement a Typescript interface without necessarily implementing the parent interfaces

Kendo dropdown list won't trigger the change() event

Is it possible to manipulate divs with CSS media queries for positioning?

Encountering a CORS Policy Blockage when Making a POST Request with Spring Boot

Guide to using vite-plugin-rewrite-all in conjunction with Quasar for Vue 3 - or alternative method to enable periods in paths

Is there a way to format this into four columns within a single row while ensuring it is responsive?

Basic title in material-ui navigation bar

One-of-a-kind Version: "Utilizing CSS to Capitalize an

Exploring the distinction between type-based and value-based props validation in VueJS

Website errors appear on the hosted page in <body> section without being present in the code

Tips for achieving compatibility between systemjs module loading and .net mvc architecture

Problem with BeautifulSoup table parsing

What could be causing my body to resist adapting to the information on this website?