DA
DealiAxy
2021年12月18日

Django与Vue.js模板语法冲突问题的解决

问题 django模板与vue.js的变量都是使用 {{ 和 }} 包裹起来的，在渲染django模板时会先替代掉所有的 {{ 和 }}及被包裹在其中的内容，使得vue.js没办法用 {{ 和 }}来绑定变量。 解决方法 方法1：修改vue.js的默认的绑定符号 在Vue App创建时配置 let app = new Vue({ delimiters: [[[, ]]], el: '#vu

未分类
1403 字
约 5 分钟阅读
更新于 08-26
问题解决方法方法1：修改vue.js的默认的绑定符号方法2：使用模板的标签来输出 {{ 和 }}方法3：禁用django模板渲染finally

问题

django模板与vue.js的变量都是使用 {{ 和 }} 包裹起来的，在渲染django模板时会先替代掉所有的 {{ 和 }}及被包裹在其中的内容，使得vue.js没办法用 {{ 和 }}来绑定变量。

解决方法

方法1：修改vue.js的默认的绑定符号

在Vue App创建时配置

let app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#vue-app',
  // ...
})

或者全局修改

Vue.config.delimiters = ["[[", "]]"];

执行这个之后，你就可以使用 [[、]] 来绑定变量的数据了

方法2：使用模板的标签来输出 {{ 和 }}

django模板的templatetag可以渲染模板时输出模板标签，标签参数及输出如下：

参数输出
openblock{%
closeblock%}
openvariable{{
closevariable}}
openbrace{
closebrace}
opencomment{#
closecomment#}

我们可以在模板中用

{% templatetag openvariable %} 
{% templatetag closevariable %}

来替代 {{ 和 }}

方法3：禁用django模板渲染

django标签 verbatim可以使包裹其中的代码不进行渲染保持原样输出

{% verbatim %}
    {{ vue }}
{% endverbatim %}

我们可以在需要用于vue.js的地方使用 {% verbatim %}{% endverbatim %} 包裹。

finally

这个项目是我2020年做的一个简单的在线考试系统

最终我是用的第一种方法实现

代码片段如下

<div class="card-header d-flex justify-content-between">
  <div>
    第<b>[[currentShowIndex]]</b>题
    <span class="text-primary font-weight-bold" v-if="current.type==1">单选</span>
    <span class="text-primary font-weight-bold" v-if="current.type==2">多选</span>
    <span class="text-primary font-weight-bold" v-if="current.type==3">判断</span>
  </div>
  <div id="timer"></div>
</div>