首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue.js不像{ post.title }那样显示括号

Vue.js不像{ post.title }那样显示括号
EN

Stack Overflow用户
提问于 2017-05-24 18:35:43
回答 2查看 788关注 0票数 2

由于某种原因,Vue没有为我呈现{{post.title}}{{ post.content }}括号。内容是空的(请看下面呈现的html ),但是v-bind:href="post.url"出于某种原因工作。我是Vue.js的新手,现在真的困了一天。背景:这段代码是Vue即时搜索我的Jekyll博客。

代码语言:javascript
运行
AI代码解释
复制
<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>

呈现的

代码语言:javascript
运行
AI代码解释
复制
<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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-05-24 19:03:14

杰基尔使用双花括号本身,因此您需要为Vue定义自定义定界符

代码语言:javascript
运行
AI代码解释
复制
new Vue({
    delimiters:['<%', '%>'],
    ....
})

然后使用

代码语言:javascript
运行
AI代码解释
复制
<% post.title %>

而不是。

您可以定义任何您想要的分隔符,我只是用它们作为示例。

票数 4
EN

Stack Overflow用户

发布于 2017-05-24 19:42:19

请改用v-textv-html。在vue 2.0中,Vue-config-delimiters被废弃,delimiters仅在完整构建中是可维护的。[]:https://v2.vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44171373

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文