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.