詳解django模板與vue.js沖突問題
更新時間：2019年07月07日 14:20:49 作者：xkgjfl
在本文里小編給各位整理了關(guān)于django模板與vue.js沖突問題以及實例代碼，需要的朋友們參考下。
問題：
django模板與vue.js的變量都是使用“{{”和“}}”包裹起來的，在渲染django模板時會先替代掉所有的“{{”和“}}”及被包裹在其中的內(nèi)容，使得vue.js沒有使用”{{“、”}}”來綁定變量。
處理方法：
方法1：修改vue.js的默認(rèn)的綁定符號
Vue.config.delimiters = ["[[", "]]"];
執(zhí)行這個之后，你就可以使用“[[”、“]]”來綁定變量的數(shù)據(jù)了
方法2：使用模板的標(biāo)簽來輸出“{{”、“ }}”
django模板的templatetag可以渲染模板時輸出模板標(biāo)簽，標(biāo)簽參數(shù)及輸出如下：
我們可以在模板中用
{% templatetag openvariable %}
{% templatetag closevariable %}
來替代”{{“、”}}”
方法3：禁用django模板渲染
django標(biāo)簽 verbatim可以使包裹其中的代碼不進行渲染保持原樣輸出
{% verbatim %}
{{ vue }}
{% endverbatim %}
我們可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。
相關(guān)文章
vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
下面小編就為大家介紹一下vue 自定義全局方法,在組件里面的使用。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
element日期時間選擇器限制時間選擇功能實現(xiàn)(精確到小時)
文章介紹了如何使用Element UI的DateTimePicker組件來實現(xiàn)一個時間選擇器,該選擇器只能選擇當(dāng)前時間之后的7天,并且不能選擇當(dāng)前小時,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要為大家介紹了代號為Naruto的Vue?2.7正式發(fā)布功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue通過axios發(fā)送ajax請求基礎(chǔ)演示
這篇文章主要介紹了Vue通過axios發(fā)送ajax請求基礎(chǔ)演示,包括了axios發(fā)送簡單get請求，axios get傳參，axios發(fā)送post請求等基礎(chǔ)代碼演示需要的朋友可以參考下2023-02-02
這篇文章主要介紹了用Vue?Demi同時支持Vue2和Vue3的方法,實際開發(fā)中，同一個API在不同的版本中可能導(dǎo)入的來源不一樣，比如ref方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue.js基礎(chǔ)學(xué)習(xí)之class與樣式綁定
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue通過字符串關(guān)鍵字符實現(xiàn)動態(tài)渲染input輸入框
這篇文章主要為大家詳細(xì)介紹了Vue如何通過字符串關(guān)鍵字符實現(xiàn)動態(tài)渲染input輸入框。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-12-12
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue-cli3 DllPlugin 提取公用庫 ,需要的朋友可以參考下2019-04-04