access data, methods

https://codesandbox.io/s/7mvw9q8yj1

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 にアクセス

https://codesandbox.io/s/xlqwpvj34z

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 directiveNextv-bind

Last updated