Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時,發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上,原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...),所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉,以至於我的變數反而沒被 vue 辨識。


所以,其實只要是專案裡面有這種需要用 Delimiters 相關前端 library,像是同時使用 angular 以及 vue,若都是 {{ }} ,或是其他 template engine 影響你 vue 的顯示,可以利用 vue 的 config.delimiters 來修改成另外的 delimiters 來使用,好讓 vue 不會跟原本的正宮們打架...

// delimiters 傳入一個 array,第一個 index 是左側的表達式,第二個 index 是右側的表達式。
Vue.config.delimiters = ['${', '}']

要注意這一改,就是原本有用到 vue 的 {{ }} expression 的地方都要換成 ${ },不能某地方還是維持 {{ }}。

參考: https://vuejs.org/api/#delimiters

範例如下:

JS:
Vue.config.delimiters = ['%%%', '%%%'];

new Vue({
    el: '#app',
    data: {
      name: 'WINWU'
    }
});

HTML:
<div id="app">
    my name is %%%name%%%
</div>


留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源