v-bind

https://codesandbox.io/s/ym4oovpy09

index.html
<body>
	<div id="app">
		<input type="text" @input="changeTitle">
		{{ title }}
		{{ returnName() }}
		<!-- だめ -->
		<a target="blank" href="{{link}}">link1</a>
		<!-- OK  -->
		<a target="blank" v-bind:href="link">link2</a>
	</div>
	<!-- built files will be auto injected -->
</body>
main.js
import Vue from "vue";

new Vue({
  el: "#app",
  data: {
    title: "title",
    link: "http://better-than-i-was-yesterday.com/"
  },
  methods: {
    changeTitle(event) {
      this.title = event.target.value;
    },
    returnName() {
      return this.title + "test";
    }
  }
});

Last updated