代码之家 › 专栏 › 技术社区 › yarek

Vuejs:如何在模板中混合静态和动态内容?

vue-component vuejs2 vue.js

1

yarek · 技术社区 · 7 年前

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;
  }
},

2 回复 | 直到 7 年前

1

3

akuiper 7 年前

可以在属性绑定中使用javascript:

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

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

注意,两者

`#fiche?username=${username}`

和

'#fiche?username=' + username

只是动态创建url的javascript表达式。

2

0

Phil 7 年前

定义链接或者定义一个getFiche函数。

方法的评估而计算属性只在需要时运行,因此在这种情况下它们是首选的。

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

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