我們可以使用?methods?屬性給 Vue 定義方法，methods?的基本語法：
const App = {
methods:{
// 在此時定義方法，方法之間使用逗號分隔
//方法名:function(){}
}
}
const app = Vue.createApp(App);
app.mount("#app");
演示
例如在?methods?中定義一個名為?show?的方法：
methods:{
show: function(){
console.log("顯示內容")
}
}在方法中訪問屬性
在?methods?方法中訪問?data?的數據，可以直接通過?this.屬性名?的形式來訪問。
例如我們在?show?方法中，訪問?number?屬性，可以直接通過?this.number?形式訪問，其中?this?表示的就是Vue 實例對象：
<script>
const App = {
data() {
return {
number: 100
}
},
methods: {
show: function () {
console.log(this.number);
}
}
}
const app = Vue.createApp(App);
app.mount("#app");
</script>
如果是在 Vue?構造函數外部，可以使用?……?來訪問?data?中的數據。
實戰
目標：點擊按鈕修改用戶名
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<p>{{message}}</p>
<button @click="change">點我改名</button>
</div>
<script>
const App = {
data() {
return {
message: "小飛俠"
}
},
methods: {
change() {
this.message = "水星仔" // 改變data中屬性的值
}
}
}
const app = Vue.createApp(App);
app.mount("#app");
</script>瀏覽器渲染
{{message}}
按鈕只在第一次點擊有效。
computed（計算屬性）PK methods（方法）
- 計算屬性值會基于其響應式依賴被緩存。一個計算屬性僅會在其響應式依賴更新時才重新計算
- 方法調用總是會在重渲染發生時再次執行函數
- 怎么選？如果你確定不需要緩存，那么也可以使用方法調用。