Vue Js Toggle Show More and Show Less Text

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <h3>Vue js show more and show less text</h3>
	<div id="app">
     <p>{{ displayedText }}</p>
	 <p class="text-btn" @click="expandText" v-if="isCollapsed">Show more</p>
	 <p class="text-btn" @click="collapseText(200)" v-else>Show less</p>
    </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					paragarph:
						"Vue.js is a popular JavaScript framework that allows developers to create dynamic and interactive user interfaces. With Vue.js, developers can build a wide range of UI elements, including the 'Show More/Show Less' feature. This feature is a common design pattern that allows users to expand or collapse content within a webpage. It is particularly useful for displaying long-form content, such as articles, product descriptions, and user reviews. In this article, we will explore how to implement the 'Show More/Show Less' feature in Vue.js",
					displayedText: "",
					isCollapsed: false,
				}
			},
			mounted() {
				this.collapseText(200);
			},

methods: {
				collapseText(textSize) {
					this.displayedText = this.paragarph.slice(0, textSize);
					this.isCollapsed = !this.isCollapsed;
				},
				expandText() {
					this.displayedText = this.paragarph;
					this.isCollapsed = !this.isCollapsed;
				},
			},
        });
		app.mount('#app');
	</script>
	<style>
		.text-btn {
			color: blueviolet;
			cursor: pointer;
		}
	</style>

</body>

</html>