Question

出于某种原因，Vue不会为我呈现{{ post.content }}，v-bind:href="post.url"括号。内容为空（查看下面呈现的html），但<div v-if="articles" class="large-12 columns"> <article v-for="post in itemsSearched" class="article-summary"> <header> <h2><a v-bind:href="post.url">{{post.title}}</a></h2> </header> <p>{{ post.content }}</p> <div class="large-12 column"> <a class="read-more" v-bind:href="post.url">Read More...</a> <div class="middle_line"></div> </div> </article> </div>由于某种原因起作用。我是Vue.js的新手，现在真的坚持了一天。背景故事：这段代码是Vue即时搜索我的Jekyll博客。

HTML

<article class="article-summary">
    <header>
        <h2><a href="/jekyll-update/2017/05/23/welcome-to-jekyll.html"></a></h2>
    </header> 
    <p></p> 
    <div class="large-12 column">
        <a href="/jekyll-update/2017/05/23/welcome-to-jekyll.html" class="read-more">Read More...</a> 
        <div class="middle_line"></div>
    </div>
</article>

呈现HTML

zipfile

Answer 1

Jekyll本身使用double curly braces，因此您需要为您的Vue定义自定义delimiters。

new Vue({
    delimiters:['<%', '%>'],
    ....
})

然后使用

<% post.title %>

相反。

你可以定义你想要的任何分隔符，我只是用它们作为例子。

Answer 2

请改用v-text或v-html。在vue 2.0中，Vue-config-delimiters已被弃用，delimiters仅在完整版本中可用。[]：https://vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced

Vue.js不显示像{{post.title}}这样的括号

2 个答案: