How to solve Django template and Vue conflict

问题
我们知道,在Vue中使用{{ }},在Django的模板中使用的也是{{ }},若在模板中即使用Vue也使用Django,就会引起冲突,该如何解决这种冲突呢?
解决方法
方法一:使用verbatim标签解决冲突
自Django1.5以来,加入了 {% verbatim myblock %} {% endverbatim myblock %}标签,被此标签包裹的代码将不会被Django的模板引擎渲染。这样以来,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签里,如下所示:

<div id="app">
    {% verbatim myblock %}
        {{ message }}
    {% endverbatim myblock %}
</div>

方法二:修改Vue的{{ }} 为{[{ }]}

Vue.config.delimiters = [“{[{“, “}]}”];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 6,509评论 1 77
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 11,256评论 0 118
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,201评论 0 1
  • 点我查看本文集的说明及目录。 本项目相关内容包括: 实现过程: CH7 创建在线商店 CH8 管理支付和订单 CH...
    学以致用123阅读 3,786评论 0 6
  • 生活中是否会有这样的场景,就是去还有几分分钟就要出发,这个时候你刚进火车站,背着双肩包手里拿着密码箱一路狂奔。最后...
    张红举阅读 610评论 0 0