Vue.js 更改 {{ }} 标签答案

【问题标题】：Vue.js change {{ }} tagsVue.js 更改 {{ }} 标签
【发布时间】：2016-02-11 05:54:14
【问题描述】：

我想在 Vue.js 中将 {{ something }} 更改为 <% something %>，我怎么能做到这一点，甚至可能吗？

我在 AngularJS 中寻找的等价物：

var app = angular.module('app', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

【问题讨论】：

标签： vue.js

【解决方案1】：

你应该修改配置对象的delimiters属性。

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

编辑：此解决方案适用于 Vue 1.x 及更低版本。请参阅 @Skip 和 @jaynabonne 对 Vue 2.x 解决方案的回复

【讨论】：

啊，看另一个答案。

【解决方案2】：

使用最新版本（2.0.5），上述方法不起作用。与其分配给全局配置，不如将分隔符作为选项传递给 Vue 实例：

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

至少，我必须这样做才能让它发挥作用。

【讨论】：

你拯救了我的一天。我坚持编写一个独立的 vuejs html 并将其用作烧瓶中的模板。这是我能找到的最简单、最好的解决方案。

【解决方案3】：

我正在独立运行 Vue 2.1.0，这是我必须使用的

Vue.options.delimiters = ['{[{', '}]}'];

【讨论】：

【解决方案4】：

使用此代码更改 vue js 中的模板引擎

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

【讨论】：

【解决方案5】：

如果您使用的是 Vue 3.x，documentation 会告诉您这样做：

Vue.createApp({
  // Delimiters changed to ES6 template string style
  delimiters: ['${', '}']
})

【讨论】：