Vue.js模板连接道具

Question

JS：

<profile :id="user.id"></profile>

HTML：

<a href="/profile/2">

预期结果：

"/profile/"

问题： 如何将user.id与{{1}}连接起来等于2？

Answer 1

您可以在Vue模板中内嵌javascript，如下所示：

template: `<a v-bind:href="'/profile/' + id"></a>`,

或者，您可以绑定到计算属性：

Vue.component('profile', {
  template: `<a v-bind:href="url"></a>`,
  props: ['id'],
  computed: {
    url() {
      return '/profile/' + this.id;
    }
  }
});