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