How to apply Switch in VueJS using Filters?

Last Updated : 24 Jul, 2024

In this article, we will see how to apply a switch in VueJS using filters. In Vue.js the filter is the simple JS function that is mainly used to change the output of data to the browser. We can apply the Switch in Vue.js using these Filters in the following ways:

Table of Content

Using Static Approach
Using Dynamic Approach

Using Static Approach

In this method, the data and the filters will be static and can not be changed. It shows the result of the static filters applied by the programmer on the user screen.

Example: The below code example implements the static approach to apply Switch in VueJS using Filters.

HTML

<!DOCTYPE html>

<html>
<head>
	<title>Example 1</title>
	<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
	</script>
</head>

<body>
	<div id="GFGCourses">
		<h2>GeeksforGeeks Courses</h2>
		<div v-for="course in courses" :key="course.id">
			<p>
				<strong>{{ course.name }}:</strong> 
				{{ course.type | courseCategory }}
			</p>
		</div>
	</div>
	<script>
		const GFGCourses = new Vue({
			el: "#GFGCourses",
			data: {
				courses: [
					{ id: 1, name: "JavaScript Basics", 
					type: "programming" },
					{ id: 2, name: "Data Structures in Python", 
					type: "programming" },
					{ id: 3, name: "Introduction to Machine Learning", 
					type: "data-science" },
					{ id: 4, name: "Web Development with React",
					type: "web-development" },
					{ id: 5, name: "Networking Fundamentals",
					type: "networking" },
				],
			},
			filters: {
				courseCategory: function (type) {
					switch (type) {
						case "programming":
							return "Programming Course";
						case "data-science":
							return "Data Science Course";
						case "web-development":
							return "Web Development Course";
						case "networking":
							return "Networking Course";
						default:
							return "Other Course";
					}
				},
			},
		});
	</script>
</body>

</html>

Output:

Using Dynamic Approach

In this method, a input will be taken from user and then filters will be applied on it to display the relevant data on the user screen.

Example: The below code example uses the dynamic approach to apply Switch in VueJS using Filters.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Example 2</title>
	<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
	</script>
</head>

<body>
	<div id="app">
		<label for="courseInp">
			Enter a platform:
		</label>
		<input type="text"
			id="courseInp"
			v-model="userInput">
		<p>
			<strong>
				{{ userInput }} : 
			</strong>
			{{ userInput | type }}
		</p>
	</div>
	<script>
		const app = new Vue({
			el: '#app',
			data: {
				userInput: ''
			},
			filters: {
				type: function (course) {
					switch (course.toLowerCase()) {
						case 'geeksforgeeks':
							return 'It is a programming platform.';
						case 'coursera':
							return 'It is an online course platform.';
						case 'udemy':
							return 'It is an online learning platform.';
						default:
							return 'Course type not recognized.';
					}
				}
			}
		});
	</script>
</body>

</html>

Output:

Capitalizing a string using filters in VueJS

gpancomputer

Improve

Article Tags :

How to apply Switch in VueJS using Filters?

Using Static Approach

Using Dynamic Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?