How to add click style in Uniapp

Uniapp is a cross-platform mobile application development framework that can help developers quickly build applications for different platforms such as iOS, Android, and H5. In the development of mobile applications, UI effects often play a crucial role. How to add click styles in Uniapp is a very common question. Next, this article will introduce some methods to achieve click style effects to help developers easily achieve their needs.

1. Using CSS

In Uniapp, you can add CSS styles to create click effects. For example, you can define a style named "active". When an element is clicked, the style will be applied to produce an effect.

.active {
  background-color: #f2f2f2;
}

Then, use the @click event to bind a method in the template and add the style to be applied in the method:

<template>
  <div @click="toggleActive" :class="{ active: isActive }">点击我</div>
</template>
<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

In the above code, click on the "Click me" element The CSS style named "active" will be applied to add a light gray background to this element. By using :class to dynamically bind CSS classes, you can easily achieve the effect of adding styles when clicked.

2. Using Vue Transition

Vue Transition can add and remove elements in an animated way. It can be used in conjunction with the @click event to animate elements when clicked.

First, add the tag to the template:

<template>
  <div @click="toggleActive">
    <transition name="fade">
      <div v-if="isActive">点击我</div>
    </transition>
  </div>
</template>

In the above code, a Vue Transition named "fade" is defined, which will add a fade-in to the element. Fade out effect. When the v-if attribute value of the element is true, it means that the element has been clicked. At this point, a "fade" Transition will be applied to the element to produce a fade animation effect.

Next, define the toggleActive function in the script and toggle the isActive attribute value in the function. When the property value becomes true, the Transition component will apply the "fade" effect and display the "Click Me" element.

<template>
  <div @click="toggleActive">
    <transition name="fade">
      <div v-if="isActive">点击我</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

3. Use Vue’s built-in instructions

Vue’s built-in instruction v-bind:class can dynamically add CSS classes when clicked. Make the element's style change with user interaction.

In the template, use the v-bind:class directive and add in it the CSS class to be applied on click. This CSS class is automatically applied when the element is clicked.

<template>
  <div :class="{ active: isActive }" @click="toggleActive">点击我</div>
</template>

In the above code, when the value of the isActive attribute is true, the CSS class named "active" will be applied. At this time, the "active" class style will affect the element to produce a click effect.

In the script, define the toggleActive function and switch the value of the isActive attribute in the function:

<template>
  <div :class="{ active: isActive }" @click="toggleActive">点击我</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

By using CSS, Vue Transition and Vue built-in instructions, you can add on click in Uniapp Style effect. These methods are very simple and easy to understand, and developers only need to choose the method that suits them based on actual needs.

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