How to add style after vue click

In Vue.js, we can control the style of elements by binding class attributes, and change the status of elements through click events, thereby achieving the effect of adding styles after clicking. This article will introduce how to use Vue.js to achieve this function.

1. First, define a variable in the Vue instance to control the style of the element.

data () {
  return {
    isActive: false
  }
}

2. Bind the class attribute to the element.

<div>Click me</div>

3. Explain the meaning of the above code. We use the :class directive in the div tag to bind an object. The attribute name of the object is the style class name, and the attribute value is a boolean type, which is used to control whether the style is effective or not. When isActive is true, the active attribute in the object takes effect, thereby adding active style to the div tag. When isActive is false, this style does not take effect. At the same time, we use the @click directive to monitor the click event of the div tag and invert the value of isActive to achieve the effect of adding styles after clicking.

4. Use CSS style sheet to define active style.

.active {
  background-color: red;
}

5. Add style animation effects (optional).

.active {
  background-color: red;
  animation: active 0.5s;
}

@keyframes active {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Add an animation named active to the style sheet to achieve the gradient transition effect of the style. When the active style on the div tag takes effect, the animation effect will also be triggered, making the interface more vivid and interesting.

Summary:

Through the :class directive and @click directive of Vue.js, we can easily achieve the effect of adding styles after clicking. At the same time, we can also use animation effects in CSS style sheets to add basic dynamic effects to the page, making it more vivid and interesting.

The above is the detailed content of How to add style after vue click. For more information, please follow other related articles on the PHP Chinese website!