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