当前位置: 首页 > 编程笔记 >

详解django模板与vue.js冲突问题

薛博赡
2023-03-14
本文向大家介绍详解django模板与vue.js冲突问题,包括了详解django模板与vue.js冲突问题的使用技巧和注意事项,需要的朋友参考一下

问题:

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

处理方法:

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

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

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

方法2:使用模板的标签来输出“{{”、“ }}”

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

我们可以在模板中用

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

来替代”{{“、”}}”

方法3:禁用django模板渲染

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

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

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

 类似资料:
  • 问题内容: 我想将AngularJS与Django一起使用,但是它们都用作模板标记。有没有一种简单的方法可以将两者之一更改为使用其他自定义模板标签? 问题答案: 对于Angular 1.0,你应该使用$ interpolateProvider api配置插值符号:http : //docs.angularjs.org/api/ng.$interpolateProvider。 这样的事情应该可以解决

  • 本文向大家介绍jQuery无冲突模式详解,包括了jQuery无冲突模式详解的使用技巧和注意事项,需要的朋友参考一下 解决冲突的方法: 在jQuery中解决冲突的方法是noConflict()方法,这个方法将$标识符的控制权返回给其他JavaScript库 如以下示例中的jQuery代码将在将jQuery加载到页面后立即将其置于无冲突模式,并分配新的变量名称$j以替换$别名,以避免与原型框架冲突。详

  • 问题内容: 我正在尝试在Django模板中使用Vue.js。以下是一种这样的模板: 我将Vue的插值定界符更改为 [[]], 以避免与Django发生冲突。我的样子如下: 不幸的是,呈现的HTML包含。还有其他人遇到过类似的问题吗? 问题答案: 正如Vue v1.0的每个文档所说: 因此,在您的示例中更改为: 但是,强烈建议您使用新版本的Vue(版本2)以便保持最新!

  • 问题内容: 我与golang html / template和angularjs分隔符冲突。我知道有一种方法可以更改Go中的定界符,但它对我不起作用。也许应该在解析文件之前调用它?您能否提供一个示例,说明应如何实施。 我发现很多评论认为AngularJS和Go应该没有任何冲突,因为它们应该分开使用。据我了解,Go应该仅用于后端(REST)。问题是,应如何加载AngularJS,HTML?在这种情况

  • 大大,这个问题折磨了我半个清明假期,求救!! 详情 宿主机部署AMH 7.1面板 宿主机部署Nginx-proxy-manager (docker版本) 宿主机 docker 0 网卡 127.0.17.1 目前宿主机有三个docker A 部署 127.0.0.1 9002 使用amh lngx反代 ssl启用强制https 同时lngx设置为默认站点 B 部署 127.0.0.1 9004 使

  • 现在这种情况仍然发生,但很少发生,就像100次碰撞中有1次发生,而在100次碰撞中有20次发生之前