參考書籍《Vue.js快跑：構建觸手可及的高效能Web應用》第1章 Vue.js基礎--方法
阿新 • • 發佈：2021-06-17
函式是十分優雅的語言特性，它讓我們可以採用可複用的方式儲存一段邏輯，從而不用重複程式碼就可以多次使用這一邏輯。在Vue的模板裡，函式被定義為方法來使用。只要將一個函式儲存為methods物件的一個屬性，就可以在模板中使用它：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>方法</title> </head> <body> <div id="app"> <p>當前狀態：{{statusFromId(status)}}</p> <!-- 除了在插值中使用方法，還可以在屬性繫結中使用它們 --> <ul> <li v-for="number in filterPositive(numbers)">{{number}}</li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> let vue = new Vue({ el: "#app", data: { status: 0, numbers: [-3, -2, -1, 0, 1, 2, 3] }, methods: { statusFromId(id) { const status= ({ 0: "吃飯", 1: "睡覺", 2: "打豆豆" })[id]; return status || "未知狀態" + id; }, filterPositive(numbers) { return numbers.filter((number) => number >= 0); } } }) </script> </body> </html>