資料結構
網路
關係資料庫管理系統
作業系統
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/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 專案中並執行 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>
在本文中，我們討論瞭如何在 Vue 中使用過濾器應用 Switch，並透過兩個示例進行了說明。在第一個示例中，我們使用 Switch 檢查工作日/週末，在第二個示例中，我們根據數字檢查日期。
更新於: 2023年4月13日
659 次檢視
廣告