詳解django模板與vue.js沖突問(wèn)題

發(fā)布時(shí)間：2020-10-12 12:55:38 來(lái)源：腳本之家閱讀：428 作者：xkgjfl 欄目：web開(kāi)發(fā)

問(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ù)及輸出如下：

詳解django模板與vue.js沖突問(wèn)題

我們可以在模板中用

{% templatetag openvariable %} 
{% templatetag closevariable %}

來(lái)替代”{{“、”}}”

方法3：禁用django模板渲染

django標(biāo)簽 verbatim可以使包裹其中的代碼不進(jìn)行渲染保持原樣輸出

{% verbatim %}
  {{ vue }}
{% endverbatim %}

我們可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡