vue search box changes background color

As the Vue framework is used more and more widely in front-end development, how to use the search box and change its background color in the Vue framework has become the focus of developers.

This article will introduce how to add a search box in the Vue framework and change its background color through custom styles to help developers better develop Vue applications.

1. Add a search box

First of all, adding a search box in the Vue framework requires the use of Vue components. We can make the search box as a separate component and reference it where needed.

The following is an example of a simple search box component:

<template>
  <div class="search-box">
    <input type="text" placeholder="搜索..." v-model="query" @input="search" />
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  data() {
    return {
      query: ""
    }
  },
  methods: {
    search() {
      this.$emit("search", this.query);
    }
  }
}
</script>

<style>
.search-box {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
}
</style>

In this component, we use an input box and a search method, and pass$emit# in the search method ##Trigger the search event and pass the text in the search box as event parameters.

Customized search box style

Next, let’s look at how to change the background color of the search box through custom styles.

First of all, we can use the CSS pseudo-class

:focus to control the style of the search box when it gets focus. When the search box gets focus, we change its background color to blue.

.search-box input:focus {
  outline: none;
  border-color: #0099ff;
  box-shadow: 0 0 3px rgba(0,153,255,.5);
}

Then, we can use Vue's dynamic binding class to add different styles to the search box according to different situations. For example, we can pass in a

color attribute in the search box and add different background colors to the search box based on different attribute values.

<template>
  <div class="search-box" :class="color">
    <input type="text" placeholder="搜索..." v-model="query" @input="search" />
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  props: {
    color: {
      type: String,
      default: "white"
    }
  },
  data() {
    return {
      query: ""
    }
  },
  methods: {
    search() {
      this.$emit("search", this.query);
    }
  }
}
</script>

<style>
.white {
  background-color: #fff;
}
.blue {
  background-color: #0099ff;
}
.yellow {
  background-color: #ffff00;
}
</style>

When using the search box, we can pass in different

color attribute values. For example:

<SearchBox color="blue"/>
<SearchBox color="yellow"/>

In this way, we can flexibly add different styles to the search box.

Summary

This article introduces how to add a search box in the Vue framework and change its background color through custom styles. Through the examples in this article, we can see that the flexibility and easy extensibility of the Vue framework make it easier for developers to develop high-quality web applications.

At the same time, this article also reminds developers that when using the Vue framework to develop applications, they should pay attention to mastering the core concepts and syntax of Vue, and be familiar with commonly used Vue plug-ins and component libraries, so as to better develop efficient and scalable , easy-to-maintain Web applications.

The above is the detailed content of vue search box changes background color. For more information, please follow other related articles on the PHP Chinese website!