iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
Vue.js

Vue3 - 從零開始學系列 第 6

Vue3 - 從零開始學 - Day6 - 函式

  • 分享至 

  • xImage
  •  

前兩個單元已經學會了 if 判斷式與迴圈,接下來討論在程式語言之中最常用的函式。

首先,先宣告兩個變數 x 跟 y,型別都是數字:

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
};
</script>

如果要將 x 跟 y 兩個變數做數學運算,例如相乘,可以這樣寫:

<template>
  {{ x * y }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
};
</script>

但是如果這兩個變數相乘的數學運算會用在兩個地方,這樣是一種寫法:

<template>
  {{ x * y }}
  <br>
  {{ x * y }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
};
</script>

有沒有發現什麼問題?如果需要用這套數學運算在 10 個地方呢?會需要寫 10 次,又如果這個相乘的運算要修改成相加,是不是又要改 10 次?

其實不用這麼麻煩,函式在這個時候就派上用場,在 Vue3 要使用函式,必須要使用 methods: {} 來宣告函式,宣告一個函式的寫法:

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
  methods: {
    myFunction() {
      return this.x * this.y;
      //注意在這邊要用 this 來取得定義在 data() 內的變數
    },
  },
};
</script>

函式的寫法必須要使用一個名稱,在這邊命名為 myFunction,而這個 myFunction 內部直接回傳 x 跟 y 的相乘結果,這邊要注意用 this 來取得定義在 data() 內的兩個變數 x 跟 y。

所以在 內就可以直接呼叫這個函式的名稱:

<template>
  {{ myFunction() }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
  methods: {
    myFunction() {
      return this.x * this.y;
    },
  },
};
</script>

呼叫 10 次也不怕了:

<template>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }} <br>
  {{ myFunction() }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
  methods: {
    myFunction() {
      return this.x * this.y;
    },
  },
};
</script>

最後,函式還可以將某一個值傳給函式來使用:

<template>
  {{ myFunction(100) }}
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 100,
      y: 2,
    };
  },
  methods: {
    myFunction: function (value) {
      return this.x * this.y + value;
    },
  },
};
</script>

在這邊傳入一個數值 100 給 myFunction,然後與 x 跟 y 的相乘結果相加起來。所以在這邊的例子會印出 300。

今日程式碼範例

Vue3 - 從零開始學 - Day6 [完]


上一篇
Vue3 - 從零開始學 - Day5 - 迴圈
下一篇
Vue3 - 從零開始學 - Day7 - Demo
系列文
Vue3 - 從零開始學31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言