如何在 Vue js x-template 的 html 属性中解析字符串？ [复制]

Question

这样的事情不会被正确解析。 {{ item.post_permalink }} 不会被传入的文本替换，而{{ item.read_label }} 将被正确解析。

<script type="text/x-template" id="news-template">
   <a href="{{ item.post_permalink }}" class="read-more">{{ item.read_label }}</a>
</script>

如何解决？似乎与在 html 属性中有些相关

Answer 1

你应该使用v-bind动态绑定属性值而不是{{ }}

所以这样做：

   <script type="text/x-template" id="news-template">
       <a v-bind:href="item.post_permalink" class="read-more">{{ item.read_label }}</a>
    </script>

或v-bind 的简写是:，如下所示：

   <script type="text/x-template" id="news-template">
       <a :href="item.post_permalink" class="read-more">{{ item.read_label }}</a>
    </script>