無法將文本綁定到 VueJS 模板中的 href 屬性

Question

我正在使用 VueJS 構建模板。

從我的“帖子”數據中，我已經能夠使用 Mustache 語法將文本綁定到 html 元素，例如span 、 a和p 。 但是當我嘗試將文本綁定到元素屬性中時，例如a元素中的href ，它不起作用。

我查看了不同的教程，但沒有一個具體說明如何將文本綁定到同一代碼中的元素及其屬性——大多數都顯示了一個或另一個，但沒有在同一個模板中一起顯示。

---

我的 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"
         }
    ]}
});

---

在 JSFiddle 中查看我的代碼

Answer 1

在屬性中，你必須直接指明 props 或 JS 表達式，不要留胡子：

<a :href="url">{{ post.title }}</a>

Answer 2

您不需要在文本綁定上使用雙括號：

<a :href="post.url">{{ post.title }}</a>