在 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>
演示圖如下所示： 