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


Posted in Javascript onJuly 07, 2019

问题:

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

处理方法:

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

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

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

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

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

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

我们可以在模板中用

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

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

方法3:禁用django模板渲染

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

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

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

Javascript 相关文章推荐
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
django中使用vue.js的要点总结
Jul 07 #Javascript
Vue使用lodop实现打印小结
Jul 06 #Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 #Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
You might like
BBS(php & mysql)完整版(四)
2006/10/09 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
js实现网页收藏功能
2015/12/17 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
深入理解Node module模块
2018/03/26 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python中global用法实例分析
2015/04/30 Python
浅谈Python中函数的参数传递
2016/06/21 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
自荐信如何制作?
2014/02/21 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
丧事主持词
2015/07/02 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript