How to solve Django template and Vue conflict

問題
我們知道,在Vue中使用{{ }},在Django的模板中使用的也是{{ }},若在模板中即使用Vue也使用Django,就會(huì)引起沖突,該如何解決這種沖突呢?
解決方法
方法一:使用verbatim標(biāo)簽解決沖突
自Django1.5以來,加入了 {% verbatim myblock %} {% endverbatim myblock %}標(biāo)簽,被此標(biāo)簽包裹的代碼將不會(huì)被Django的模板引擎渲染。這樣以來,我們可以把帶有{{ }} 的Vue代碼放在 {% verbatim myblock %}標(biāo)簽里,如下所示:

<div id="app">
    {% verbatim myblock %}
        {{ message }}
    {% endverbatim myblock %}
</div>

方法二:修改Vue的{{ }} 為{[{ }]}

Vue.config.delimiters = [“{[{“, “}]}”];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    王喂馬_閱讀 6,597評(píng)論 1 77
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    你猜_3214閱讀 11,349評(píng)論 0 118
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,297評(píng)論 0 1
  • 點(diǎn)我查看本文集的說明及目錄。 本項(xiàng)目相關(guān)內(nèi)容包括: 實(shí)現(xiàn)過程: CH7 創(chuàng)建在線商店 CH8 管理支付和訂單 CH...
    學(xué)以致用123閱讀 3,880評(píng)論 0 6
  • 生活中是否會(huì)有這樣的場(chǎng)景,就是去還有幾分分鐘就要出發(fā),這個(gè)時(shí)候你剛進(jìn)火車站,背著雙肩包手里拿著密碼箱一路狂奔。最后...
    張紅舉閱讀 683評(píng)論 0 0

友情鏈接更多精彩內(nèi)容