Django與Vue語法的沖突問題完美解決方法
更新時間：2017年12月14日 14:11:01 作者：alsww
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧
當(dāng)我們在django web框架中,使用vue的時候,會遇到語法沖突.
因為vue使用{{}},而django也使用{{}},因此會沖突.
解決辦法1:
在django1.5以后,加入了標(biāo)簽:
{% verbatim myblock %} {% endverbatim myblock %}
被此標(biāo)簽包裹的代碼將不會被Django的模板引擎渲染。
因此,我們可以把帶有{{ }} 的Vue代碼放在 {% verbatim myblock %}標(biāo)簽中間,例如:
<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的默認(rèn)的綁定符號
vue2.0已經(jīng)廢棄這種寫法:
Vue.config.delimiter=['[[',']]'];
正確姿勢:
var vm = new Vue({
delimiters:['[[', ']]'],
el:'#box',
data:{
arr:['apple','pear','grape']
},
methods:{
add:function () {
this.arr.push('tomato')
}
}
})
總結(jié)
以上所述是小編給大家介紹的Django與Vue語法的沖突問題完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
解決vue-element-admin中配置跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue+echarts實現(xiàn)多條折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了基于vue實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要給大家介紹了關(guān)于vue中三元表達(dá)式的相關(guān)資料,眾所周知三元表達(dá)式用來根據(jù)參數(shù)的不同執(zhí)行不同的代碼是很方便的,需要的朋友可以參考下2023-09-09
vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果
這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue3+X6流程圖實現(xiàn)數(shù)據(jù)雙向綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合X6流程圖實現(xiàn)數(shù)據(jù)雙向綁定,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue proxyTable配置多個接口地址,解決跨域的問題
這篇文章主要介紹了Vue proxyTable配置多個接口地址,解決跨域的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09