Vue js Replace spaces And Special Character with dashes and make all letters lower-case

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>Vue js Replace spaces And Special Character with dashes and make all letters lower-case</h3>
	<div id="app">
		<input v-model="text" type="text">
		<p>URL:  {{ convertedText }}</p>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					text: "Vue js Replace spaces And Special Character with dashes and make all letters lower-case",
				}
			},
          computed: {
				convertedText() {
					return this.text
						.toLowerCase()
						.replace(/[^a-zA-Z0-9]+/g, "-");
				},
			},
        });
		app.mount('#app');
	</script>
	<style scoped>
		input {
            width:100%;
			height: 40px;
			text-align: center;
			font-size: 24px;
			margin: 0;
			padding-left: 0;
			border: none;
			border-bottom: 2px solid #ccc;
			box-shadow: none;
			background-color: #f1f1f1;
			color: #333;
			transition: all 0.3s ease-in-out;
			font-family: Arial, Helvetica, sans-serif;
		}

input:focus {
			outline: none;
			border-bottom-color: #007bff;
		}
	</style>
</body>

</html>