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

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

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

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

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.