极客笔记如何在Vue中使用Switch和Filters
Vue可以定义为用于构建用户界面的渐进性框架。它具有多个指令，可根据用户的需求使用。基本核心库主要集中在构建视图层，并且也很容易选择其他库或与其集成。
Vue组件提供了过滤器功能，用于过滤请求和响应，让用户对模板动态数据应用不同的格式化和转换。过滤器在两个地方使用：{{mustache插值}}和v-bind表达式。
函数附加在JavaScript表达式的末尾，并用管道操作符表示。
例如：
{{ message | filter }}
示例：使用Switch检查工作日/周末
复制粘贴以下代码片段到你的Vue项目中并运行该项目。你将在浏览器窗口中看到以下输出。
- 文件名 – app.js
-
目录结构 — $ 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.";
}
},
},
});
-
文件名 – index.html
-
目录结构 — $ 项目/公共文件夹 — 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>
运行以下命令以获得下面的输出结果 –
C://my-project/ > npm run serve
完整代码
<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>
示例：从数字中检查日期
复制粘贴以下代码片段到你的Vue项目中，并运行该项目。你将在浏览器窗口上看到下面的输出。
- 文件名 – app.js
-
目录结构 — $ 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";
}
},
},
});
-
文件名 – index.html
-
目录结构 — $ 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>
运行以下命令以获得以下输出-
C://my-project/ > npm run serve
完整代码
这是一个完整的代码，将app.js和index.html组合成一个单独的HTML文件。该程序可以作为一个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>
// 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>
在本文中，我们讨论了如何使用Filters在Vue中应用Switch，并通过两个示例进行了说明。第一个示例中，我们使用Switch检查了工作日/周末，而在第二个示例中，我们检查了从数字中获取的日期。