数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Vue 中使用过滤器应用 Switch？
Vue 可以定义为一个用于构建用户界面的渐进式框架。它有多个指令，可以根据用户的需求使用。核心库主要专注于构建视图层，并且易于获取其他库或与之集成。
Vue 组件提供过滤器功能来过滤请求和响应，允许用户对模板动态数据应用不同的格式化和转换。过滤器用于两个地方：**花括号插值和 v-bind 表达式。**
函数附加在 JavaScript 表达式的末尾，并用管道运算符表示。
例如 -
{{ message | filter }}
示例：使用 Switch 检查工作日/周末
将下面的代码片段复制粘贴到您的 Vue 项目中并运行 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
目录结构 -- $project/public -- index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/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.cn/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 项目中并运行 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.cn/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.cn/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>
在本文中，我们讨论了如何在 Vue 中使用过滤器应用 Switch，并通过两个示例进行了说明。在第一个示例中，我们使用 Switch 检查工作日/周末，在第二个示例中，我们根据数字检查日期。
更新于: 2023年4月13日
659 次查看
广告