access data, methods

main.js

import Vue from "vue";

new Vue({
  el: "#app",
  data: {
    title: "title"
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    },
    returnName() { // この関数を呼び出す
      return "/ this is name";
    }
  }
});

index.html

<body>
	<div id="app">
		<input type="text" @input="changeTitle">
		{{ title }}
		{{ returnName() }} 
		<!-- () で読んであげれば自動的に method を呼ぶ -->
	</div>
</body>

this にアクセス

main.js

import Vue from "vue";

new Vue({
  el: "#app",
  data: {
    title: "title"
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    },
    returnName() {
      return this.title + "test";
    }
  }
});

Previouson directive Nextv-bind

Last updated 6 years ago