Django与Vue语法的冲突问题完美解决方法
程序员文章站
2022-05-07 15:01:26
当我们在django web框架中,使用vue的时候,会遇到语法冲突.
因为vue使用{{}},而django也使用{{}},因此会冲突.
解决办法1:
在djang...
当我们在django web框架中,使用vue的时候,会遇到语法冲突.
因为vue使用{{}},而django也使用{{}},因此会冲突.
解决办法1:
在django1.5以后,加入了标签:
{% verbatim myblock %} {% endverbatim myblock %}
被此标签包裹的代码将不会被django的模板引擎渲染。
因此,我们可以把带有{{ }} 的vue代码放在 {% verbatim myblock %}标签中间,例如:
<div id="app1"> {% verbatim myblock %} {{ message1 }} {% endverbatim myblock %} </div>
解决办法2:
修改vue的{{ }} 为{[ ]}
<script>vue.config.delimiters = ["{[", "]}"]</script>
使用的时候:
<div id="app1"> {[ message1 ]} </div>
ps:vue之django 和vue语法冲突处理
修改vue.js的默认的绑定符号
vue2.0已经废弃这种写法:
vue.config.delimiter=['[[',']]'];
正确姿势:
var vm = new vue({ delimiters:['[[', ']]'], el:'#box', data:{ arr:['apple','pear','grape'] }, methods:{ add:function () { this.arr.push('tomato') } } })
总结
以上所述是小编给大家介绍的django与vue语法的冲突问题完美解决方法,希望对大家有所帮助
上一篇: AngularJS集合数据遍历显示的实例
下一篇: 全面介绍vue 全家桶和项目实例
推荐阅读
-
使用vue-router与v-if实现tab切换遇到的问题及解决方法
-
asp.net开发与web标准的冲突问题的一些常见解决方法
-
python3.8与pyinstaller冲突问题的快速解决方法
-
framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
-
Django与Vue语法的冲突问题完美解决方法
-
php5.3中ZendGuardLoader与wincache冲突问题的解决方法
-
使用vue-router与v-if实现tab切换遇到的问题及解决方法
-
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
-
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
-
python3.8与pyinstaller冲突问题的快速解决方法