JIYIK CN >

Vue is a popular JavaScript framework for building interactive web applications. Vue provides many powerful features, one of which is the ability to easily switch the background color when a button is clicked. In this article, we will show you how to implement this feature in Vue using simple code.

Step 1: Create a Vue application

First, we need to create a Vue application. We can use the Vue CLI to create a new Vue application. Open your terminal and enter the following command:

vue create my-app

Where my-appis your application name. After entering this command, Vue CLI will prompt you to select some configuration options, such as Babel, ESLint, and Linter/Formatter. Select the configuration options you want and wait for the application to be created.

Step 2: Add buttons and styles

Before we start writing code, we need to add a button and some styles. In src/App.vuethe ./blog/openwrt file, add the following code:

<template>
  <div class="container">
    <button @click="changeColor">Change Color</button>
  </div>
</template>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

In the code above, we added a button and some styles. The text of the button is "Change Color", and we added a click event to the button, which will be triggered when the button is clicked.

Step 3: Add data and methods

Next, we need to add data and methods to the Vue instance. In src/App.vuethe file, add the following code:

<script>
export default {
  data() {
    return {
      backgroundColor: "#f5f5f5"
    };
  },
  methods: {
    changeColor() {
      if (this.backgroundColor === "#f5f5f5") {
        this.backgroundColor = "#007bff";
      } else {
        this.backgroundColor = "#f5f5f5";
      }
    }
  }
};
</script>

In the code above, we use datathe backgroundcolor function to define a backgroundColorvariable called backgroundcolor that stores the value of the current background color. We also define a changeColormethod called backgroundcolor that will be called when the button is clicked. This method will check the value of the current background color and change it to blue if the current color is gray and vice versa.

Step 4: Binding Styles

Now that we have defined the data and methods, we need to bind the background color to the container element's style. In src/App.vuethe ./blog/docs/docs/src/main/container/style/common/lib/container/content ...

<div class="container" :style="{ backgroundColor: backgroundColor }">

In the code above, we use :stylethe binding syntax to backgroundColorbind the variable to the style property of the container element background-color.

Step 5: Run the Application

Now that we have all the code completed, we can run the application locally with the following command:

npm run serve

This command will start the development server and open the application in your browser. Now, when you click the Change Color button, the background color of the application will switch between gray and blue.

Summarize

In this article, we introduced how to use simple code in Vue to implement the function of switching the background color when clicking a button. We used Vue's data binding and methods to implement this function, and used style binding to bind the background color to the style of the container element. You can use these techniques to implement other similar functions, such as switching font color or text content.