Vue.js - 双花括号（Mustache）语法不起作用/渲染到页面

Posted 2023-02-22

技术标签:

【中文标题】Vue.js - 双花括号（Mustache）语法不起作用/渲染到页面【英文标题】：Vue.js - Double curly braces(Mustache) syntax not working/rendering to page 【发布时间】：2018-08-14 15:02:36 【问题描述】：

我刚开始学习 vue.js

我不知道为什么，但是双花括号语法没有呈现，但是当我使用 v-text 指令时，它确实有效。这是我的代码：

html:

<!DOCTYPE html>
<html>
  <head>
    % include '_depend.html' %

    <title></title>
  </head>
  <body>

    % if signed_in %
      % include 'nav-signed-in.html' %
    % else %
      % include 'nav-signed-out.html' %
    % endif %

    <!--  -->

    <div id="welcome-vue" class="container container-top-space">
      <div class="row">
        <div class="col s12">
          <div class="card-panel">
            <p class="text-center"> header_msg </p>
          </div>
        </div>
      </div>
    </div>


    <script src="/vault/js/vue.min.js"></script>
    <script src="/vault/js/vues/welcome-ctrl.js"></script>

    <!--  -->

    % include 'footer.html' %

    % include '_events.html' %

  </body>
</html>

js:

const welcomeVue = new Vue(
  el: '#welcome-vue',
  data: 
    header_msg: 'sample message'
  
);

为什么双花括号不起作用？控制台中没有错误，当我记录 Vue 实例时，一切都在那里，包括 $el 属性。

【问题讨论】：

您使用什么来呈现% ... % 包含的内容？很可能正在渲染的任何东西都试图渲染双花括号是的，省略了 %...% 的东西，它在这里无缝工作：jsbin.com/qoqisijumu/edit?html,js,output 啊，我明白了，我会尝试修复它。该页面由后端的 express.js 应用程序中的 nunjucks 库（如 python jinja）呈现。谢谢！谢谢！现在已经修好了；使用此属性 - 分隔符：['((', '))'], 【参考方案1】：

你和树枝模板有冲突

% verbatim %
    new Vue(
        el: '.container',
        data: 
            foo: 'Hello world.'
        
    );
% endverbatim %

像这样使用 Vue 实例。 Conflict on Template of Twig and Vue.js您可以在这篇文章中找到有关您的问题的更多信息。

【讨论】：

啊，我明白了，我会尝试修复它。该页面由后端的 express.js 应用程序中的 nunjucks 库（如 python jinja）呈现。谢谢！谢谢！现在已经修好了；使用此属性 - 分隔符：['((', '))'],

以上是关于Vue.js - 双花括号（Mustache）语法不起作用/渲染到页面的主要内容，如果未能解决你的问题，请参考以下文章