Vue.js change {{ }} tags
I want to change the {{ something }}
by <% something %>
in Vue.js, how could I achieve that, is it even possible?
An equivalent for what I look for in AngularJS:
var app = angular.module('app', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
With the latest version (2.0.5), the above doesn't work. Rather than assigning to the global config, you pass the delimiters as an option to the Vue instance:
new Vue({
el: '#app',
data: data,
delimiters: ["<%","%>"]
});
At least, that's what I had to do to make it work.
You should modify the delimiters
property of configuration object.
Vue.config.delimiters = ['<%', '%>']
Edit: This solution works for Vue 1.x and lower. See @Skip and @jaynabonne responses for Vue 2.x solution
I am running Vue 2.1.0 standalone and this is what I had to use
Vue.options.delimiters = ['{[{', '}]}'];
If you are working with Vue 3.x, the documentation tells you to do this:
Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['${', '}']
})
Use this code to change template engine in vue js
new Vue({
el: '#app',
data: {
message: 'hello world'
} ,
delimiters: ['<%' , '%>']
});