Vue.js 超链接根据道具数据改变

Question

我的 Vue 项目的主页有多个 Bootstrap 卡，每个卡都需要一个超链接按钮，该按钮与其余的共享相同的基本 URL。 URL 的结尾需要是卡片从中获取信息的道具的“名称”属性值。例如：

第一张卡片 - URL = "https://coinmarketcap.com/currencies" + "/bitcoin"

“比特币”应该来自 propName.name。

第二张卡片 - URL = "https://coinmarketcap.com/currencies" + "/litecoin"

“litecoin”应该来自 propName.name。

等等……

我尝试了以下方法：

1. 使用 data() 返回“baseURL”，它具有基本 URL 的值，将“baseURL”设置为 href 值，然后将 {{propName.name}} 附加到末尾。

2. 使用使用“onclick="window.location.href=... + {{propName.name}}"的输入标签制作链接按钮

无论我尝试将“+ {{propName.name}}”修改为 URL，应用程序无法编译，或者我收到一条错误消息，指出我无法使用“+”。

我能做什么？

谢谢。

Answer 1

您需要将变量绑定到href 属性： :href="baseURL + propName.name"

我假设baseURL 是data() 的属性。