Vuejs: как смешать статический и динамический контент в шаблоне?

Question

Вот мой шаблон vueJS

template: `
  <div>
    <div>{{ date}}</div>
    <div>{{ titre }}</div>
    <div>username: <a href='#fiche?username={{ username }}'>{{ username }}</a></div>
  </div>`

Проблема возникает, когда я пытаюсь смешать некоторую статическую строку #fiche с {{ username }}

Может быть использована некоторая альтернатива:

<div>username: <a :href='link'>{{ username }}</a></div>

и определите ссылку или определите функцию getFiche, я думаю.

methods:{
  getFiche: function(username) {
    return "#fiche?" + username;
  }
},

Есть ли какой-нибудь "более быстрый" метод?

Answer 1

и определите ссылку или определите функцию getFiche, которую я предполагаю.

Методы оцениваются всегда tick , тогда как вычисляемое свойство запускается только тогда, когда требуется, поэтому они предпочтительныдля такого рода вещей.

См. https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

template: `...
  <a :href="ficheLink">{{username}}</a>
  ...`,
computed: {
  ficheLink () {
    return `#fiche?username=${this.username}`
  }
}

Answer 2

Вы можете использовать javascript в привязке атрибутов:

<a :href="`#fiche?username=${username}`">

или <a :href="'#fiche?username=' + username">

Обратите внимание, как

`#fiche?username=${username}`

и

'#fiche?username=' + username

- это просто выражения javascript, которые динамически создают URL.