如何在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>