詳解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 = ["[[", "]]"];
執(zhí)行這個之后，你就可以使用“[[”、“]]”來綁定變量的數(shù)據了
方法2：使用模板的標簽來輸出“{{”、“ }}”
django模板的templatetag可以渲染模板時輸出模板標簽，標簽參數(shù)及輸出如下：
我們可以在模板中用
{% templatetag openvariable %}
{% templatetag closevariable %}
來替代”{{“、”}}”
方法3：禁用django模板渲染
django標簽 verbatim可以使包裹其中的代碼不進行渲染保持原樣輸出
{% verbatim %}
{{ vue }}
{% endverbatim %}
我們可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。
相關文章
使用VUE3開發(fā)很久了,但一直沒進行總結和記錄,忙里偷閑整理搭建一套VUE3項目,正好記錄一下,這篇文章主要給大家介紹了關于Vue3項目的3種創(chuàng)建方式,需要的朋友可以參考下2024-03-03
vue 是一個完全支持組件化開發(fā)的框架， 組件之間可以進行相互的引用，這篇文章主要介紹了vue中注冊組件的兩種方式詳解(全局注冊&& 局部注冊),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue雙向數(shù)據綁定指令v-model的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js + Nuxt.js 項目中使用 Vee-validate 表單校驗
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內容并顯示對應的錯誤提示信息。這篇文章給大家?guī)砹薞ue.js 使用 Vee-validate 實現(xiàn)表單校驗的相關知識，感興趣的朋友一起看看吧2019-04-04
vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue學習筆記進階篇之單元素過度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
table作為數(shù)據展示組件,在日常開發(fā)中經常被用到,這篇文章主要給大家介紹了關于vue.js管理后臺table組件封裝的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue中多個倒計時實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要為大家詳細介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08