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

更新时间：2019年07月07日 14:20:49 作者：xkgjfl

在本文里小编给各位整理了关于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 %}包裹。

您可能感兴趣的文章:

vue篇之事件总线EventBus使用示例详解
这篇文章主要为大家介绍了vue篇之事件总线EventBus使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue中注册组件的两种方式详解(全局注册&& 局部注册)
vue 是一个完全支持组件化开发的框架，组件之间可以进行相互的引用，这篇文章主要介绍了vue中注册组件的两种方式详解(全局注册&& 局部注册),需要的朋友可以参考下
2023-06-06
vue axios调用接口方法报错500 internal server err
前端使用axios 访问后端接口时报错,在浏览器中点击红色的报错数据,本文给大家分享vue axios调用接口方法报错500 internal server error的两种解决方法,感兴趣的朋友一起看看吧
2023-10-10
关于vue.js发布后路径引用的问题解决
最近在vue.js项目发布后发现了一个关于路径的问题，发现网上关于这个的资料较少，所以给大家总结下，下面这篇文章主要给大家介绍了如何解决关于vue.js发布后路径引用的问题，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
解决vue中less的使用问题
这篇文章主要介绍了解决vue中less的使用问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-11
Vue项目安装less和less-loader的详细步骤
这篇文章主要介绍了Vue项目安装less和less-loader的详细步骤，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-12
Vue动态表单的应用详解
这篇文章主要为大家详细介绍了Vue动态表单的应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Vue3.0监听器watch与watchEffect详解
在 Vue 3 中,watch 仍然是一种用于监听数据变化并执行相应操作的方式,不过在组合式 API 中,watch 的使用方式与选项式 API 略有不同,这篇文章主要介绍了Vue3.0监听器watch与watchEffect,需要的朋友可以参考下
2023-12-12
vue项目打包之后背景样式丢失的解决方案
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue 2.x教程之基础API
这篇文章主要介绍了Vue 2.x基础API的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03