Vue.js模板串連道具

Question

JS：

Vue.component('profile', { 
    template: `<a v-bind:href="id"></a>`, 

    props: ['id'] 
}); 

var app = new Vue({ 
    el: '.app', 
    data: { 
     user: userobject 
    } 
}); 

HTML：

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

預期結果：

<a href="/profile/2"> 

問題： 如何連接"/profile/"與user.id等於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; 
    } 
    } 
});