Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to apply Switch in Vue using Filters?
Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them.
The vue components provides the filter functionality to filter out the requests and response that lets the user to apply different formatting and transformations to the template dynamic data. Filters are used in two places : mustache interpolation and v-bind expressions.
Functions are appended in the end of a JavaScript expression and is denoted with a pipe operator.
For Ex −
{{ message | filter }}
Example: Checking weekday/weekends using Switch
Copy paste the below code snipped in your vue project and run the vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Defining the days to be checked to the index.html
const parent = new Vue({
el: "#parent",
data: {
day1: "Monday",
day2: "Thursday",
day3: "Sunday",
day4: "Friday",
day5: "Saturday",
},
filters: {
dayType: function (day) {
// Applying the filters with switch case.
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
return "It is a Weekday.";
case "Saturday":
case "Sunday":
return "It is a Weekend.";
}
},
},
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>{{day1}} : </strong>
{{ day1 | dayType }}
</p>
<p><strong>{{day2}} : </strong>
{{ day2 | dayType }}
</p>
<p><strong>{{day3}} : </strong>
{{ day3 | dayType }}
</p>
<p><strong>{{day4}} : </strong>
{{ day4 | dayType }}
</p>
<p><strong>{{day5}} : </strong>
{{ day5 | dayType }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
<html>
<head>
<script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>{{day1}} : </strong>
{{ day1 | dayType }}
</p>
<p><strong>{{day2}} : </strong>
{{ day2 | dayType }}
</p>
<p><strong>{{day3}} : </strong>
{{ day3 | dayType }}
</p>
<p><strong>{{day4}} : </strong>
{{ day4 | dayType }}
</p>
<p><strong>{{day5}} : </strong>
{{ day5 | dayType }}
</p>
</div>
<script>
// Defining the days to be checked to the index.html
const parent = new Vue({
el: "#parent",
data: {
day1: "Monday",
day2: "Thursday",
day3: "Sunday",
day4: "Friday",
day5: "Saturday",
},
filters: {
dayType: function (day) {
// Applying the filters with switch case.
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
return "It is a Weekday.";
case "Saturday":
case "Sunday":
return "It is a Weekend.";
}
},
},
});
</script>
</body>
</html>
Example: Checking day from numbers
Copy paste the below code snipped in your vue project and run the vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Defining the days to be checked to the index.html
const parent = new Vue({
el: "#parent",
data: {
day1: "1",
day2: "3",
day3: "6",
day4: "5",
day5: "7",
},
filters: {
dayType: function (day) {
// Applying the filters with switch case.
switch (day) {
case "1":
return "Monday";
case "2":
return "Tuesday";
case "3":
return "Wednesday";
case "4":
return "Thursday";
case "5":
return "Friday";
case "6":
return "Saturday";
case "7":
return "Sunday";
}
},
},
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>{{day1}} : </strong>
{{ day1 | dayType }}
</p>
<p><strong>{{day2}} : </strong>
{{ day2 | dayType }}
</p>
<p><strong>{{day3}} : </strong>
{{ day3 | dayType }}
</p>
<p><strong>{{day4}} : </strong>
{{ day4 | dayType }}
</p>
<p><strong>{{day5}} : </strong>
{{ day5 | dayType }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
Here is a complete code created by combining the app.js and index.html to a single html file. This program can be run as a HTML file.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>{{day1}} : </strong> {{ day1 | dayType }} </p>
<p><strong>{{day2}} : </strong> {{ day2 | dayType }} </p>
<p><strong>{{day3}} : </strong> {{ day3 | dayType }} </p>
<p><strong>{{day4}} : </strong> {{ day4 | dayType }} </p>
<p><strong>{{day5}} : </strong> {{ day5 | dayType }} </p>
</div>
<script>
// Defining the days to be checked to the index.html
const parent = new Vue({
el: "#parent",
data: {
day1: "1",
day2: "3",
day3: "6",
day4: "5",
day5: "7",
},
filters: {
dayType: function(day) {
// Applying the filters with switch case.
switch (day) {
case "1":
return "Monday";
case "2":
return "Tuesday";
case "3":
return "Wednesday";
case "4":
return "Thursday";
case "5":
return "Friday";
case "6":
return "Saturday";
case "7":
return "Sunday";
}
},
},
});
</script>
</body>
</html>
In this article, we have discussed how to apply Switch in Vue using Filters with the help of two examples. In the first example, we checked weekdays/weekends using Switch and in the second example we checked day from numbers.
250 Views
