MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. メソッド

メソッド

Vue.js
2023.08.02

vue.jsでメソッド(関数)を使用する場合は、methodsオプションを使用します。
また、データオブジェクト値を取得する場合はthis.データオブジェクト名を指定します。

記法

data() {
　return {
　　データ名 : データ,
　};
},
methods: {
　関数名 : function () {
　　return 関数処理;
　　※データを使用する場合[this.データ名]
　},
},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>methodsについて</title>
  </head>
  <body>
    <div id="app">{{ addStr() }}</div>

    <script src="./js/method.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "Vue3です!",
    };
  },
  methods: {
    addStr: function () {
      return this.message + "(関数)";
    },
  },
}).mount("#app");
出力結果

Vue3です!(関数)

Vue.js