我正在使用 VueJS 构建模板。
根据我的“帖子”数据,我已经能够使用以下方法将文本绑定(bind)到 html 元素中,例如 span、a 和 p mustache 语法。但是,当我尝试将文本绑定(bind)到元素属性(例如 a 元素中的 href)时,它不起作用。
我看过不同的教程,但没有具体说明如何在同一代码中将文本绑定(bind)到元素及其属性 - 大多数显示其中之一,但不在同一模板中一起显示。
我的 HTML 看起来像这样:
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="post in posts" :post="post"></post>
</ul>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<a :href="{{posts.url}}">{{ post.title }}</a>
<p>{{post.text}}</p>
</li>
</template>
我的 JS 看起来像这样:
Vue.component('post', {
template: "#post-template",
props: ['post']
});
var vm = new Vue({
el: "#app",
data: {
posts: [
{
title: "First post!",
text: "First text",
url: "www.firsturl.com"
},
{
title: "Second post!",
text: "Second text",
url: "www.secondurl.com"
},
{
title: "Third post!",
text: "Third text",
url: "www.thirdurl.com"
}
]}
});
最佳答案
在属性中,您必须直接指示 props 或 JS 表达式,而不需要 mustache :
<a :href="url">{{ post.title }}</a>
关于javascript - 无法将文本绑定(bind)到 VueJS 模板中的 href 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61443346/