vue 3

<template>
  <div>
    <button @click="toggleVisibility">Toggle Text</button>
    <p v-if="isVisible">This text is visible!</p>
  </div>
</template>

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

This Vue 3 code creates a simple toggle functionality. The template includes a button and a paragraph. The button triggers the toggleVisibility method when clicked. The isVisible data property determines whether the paragraph is visible or not, controlled by the v-if directive. When the button is clicked, the toggleVisibility method toggles the value of isVisible, which dynamically shows or hides the paragraph based on its boolean value.