Vue Answers

How to blur element when clicked in Vue.js?

Spread the love

To blur an element when it’s clicked in Vue.js, you can use a combination of Vue directives and data binding.

For example we write

    <button @click="blurElement">Click to blur</button>
    <div :class="{ blurred: isBlurred }">
      <!-- Your content here -->
      <p>This is a blurred element</p>

export default {
  data() {
    return {
      isBlurred: false
  methods: {
    blurElement() {
      // Toggle the isBlurred flag when the button is clicked
      this.isBlurred = !this.isBlurred;

.blurred {
  filter: blur(5px); /* Apply the blur effect */

In this example, wWe have a button that, when clicked, triggers the blurElement method.

The blurElement method toggles the value of isBlurred between true and false.

We use a conditional class binding (:class="{ blurred: isBlurred }") to apply the blurred class to the element when isBlurred is true.

The .blurred class in the style section applies the blur effect using CSS filter: blur(5px);.

Now, when you click the button, the element will toggle between being blurred and not being blurred.

Adjust the blur effect by changing the value in the filter: blur() CSS property.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *