在 methods 中定義方法
我們可以使用 methods 屬性給 Vue 定義方法，methods 的基本語法：
var vm = new Vue({ methods:{ // 在此時定義方法，方法之間使用逗號分隔 方法名:function(){}});示例：
例如在 methods 中定義一個名為 show 的方法：
methods:{ show: function(){ console.log("顯示內容") }}在 methods 方法中訪問 data 的資料，可以直接透過 this.屬性名 的形式來訪問。
示例：
例如我們在 show 方法中，訪問 number 屬性，可以直接透過 this.number 形式訪問，其中 this 表示的就是Vue 例項物件：
<script> new Vue({ el: '#app', data(){ return{ number: 100 } }, methods:{ show: function(){ console.log(this.number); } } });</script>如果是在 Vue 建構函式外部，可以使用 vm.方法名 定義或呼叫方法，還可以透過 vm.$data.屬性名 來訪問 data 中的資料。
一個小例項下面是一個用於修改使用者名稱的簡單實現，在 button 按鈕上綁定了一個 change 方法：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue的方法_俠課島(9xkd.com)</title><script src="./src/vue.min.js"></script></head><body> <h1>點選按鈕修改名字</h1> <div id="app"> <p>{{message}}</p> <button @click="change">點我改名</button> </div> <script> var app = new Vue({ el:"#app", data() { return{ message: "小飛俠" } }, methods:{ change(){ this.message = "水星仔" // 改變data中屬性的值 } } }) </script></body></html>演示圖如下所示：
最新評論