Vue.js - 如何将一个键值连接到另一个键的值

Question

我正在学习 Vue.js我有一个问题：是否可以将"链接"值放入"标记"值？像这样：

new Vue({
el: '#vue-app',
data: {
name: 'Shaun',
link: 'https://stackoverflow.com',
markup: '<a href="' + this.link + '">This is a link</a>'
}
});

Answer 1

不要像那样在数据中构建标记，这就是模板的用途

new Vue({
el: '#vue-app',
data: {
name: 'Shaun',
link: 'https://stackoverflow.com'
}
});
<template>
<a href="{{ link }}">This is a link</a>
</template>

Answer 2

我们可以这样做

new Vue({
el: '#vue-app',
data: {
name: 'Shaun',
link: 'https://stackoverflow.com'
}
});
<template>
<a :href="link">This is a link</a>
</template>

请注意，应该是：href=">

link"，而不是href=">{{ link }}">，这里与@Rick考尔德的答案不同，在Vue 2.0中不可用

Answer 3

是的，但不是那样的。

this对了，可能有很多事情......从你提供的上下文来看，不清楚它是什么。可以是全局对象，可以是函数等，但它绝对不是您期望的链接。

您可以在上面的某个地方声明它，并在link属性和markup属性中使用它：

var link = 'https://stackoverflow.com';
new Vue({
el: '#vue-app',
data: {
name: 'Shaun',
link: link ,
markup: '<a href="' + link + '">This is a link</a>'
}
});

但是，我不建议这样做。请改用@RickCalder解决方案来应对此特定用例。我只是在解决一个可以在其他更合适的情况下使用的解决方案。