详解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 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
原生JS实现拖拽效果
Dec 04 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
php 文本文件的读取效率
2012/02/10 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python字符串切片操作知识详解
2016/03/28 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
破解安装Pycharm的方法
2018/10/19 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python批量修改交换机密码的示例
2020/09/22 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
财务主管岗位职责
2014/02/28 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
紧急迫降观后感
2015/06/15 职场文书
赡养老人协议书范本
2015/08/06 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis