Vue.jsでマスタッシュ記法で記述するデリミタを変更する方法

Vue.jsを使用していてマスタッシュ記法で記述するデリミタを変更したいということはないでしょうか？

Laravelなどを使用していると変数を表示する際の表記方法が全く同じだったりします。
そんな時、マスタッシュ記法でデータバインディングするのではなく、記法を変更することが出来ます。
今回の記事では、Vue.jsでデリミタを変更する方法について紹介します。

Vue.js 2系の場合

デリミタを変更する方法は、結構簡単で下記のように記載すると変更することが出来ます。

new Vue({
    el: '#app',
    data: data,
    delimiters: ["<%","%>"]
});

’delimiters: [“<%","%>“]’の部分で変更したいデリミタを指定しています。
上記の例では、<% hoge %>　のようにソースに記述するとデータバインディングをしviewに表示することが出来ます。

言葉だけだとあれなので、実際に動作している例を下記に示します。

HTMLで記述している記法がマスタッシュ記法ではなく、<% %>でデータバインディングし、’Hello Vue.js!’が出力されることを確認することが出来ます。

Vue.js 1系の場合

Vue.js 1系の場合は、下記のように記述するとデリミタを変更できるようです。

Vue.config.delimiters = ['<%', '%>']

Vue.js 1系でデリミタを変更したい方は、参考のリンク先に記載がされているので、リンク先を見て見てください。

[参考]
Vue.js change {{ }} tags