在 Vue 中编译内联文本字符串答案

【问题标题】：Compiling inline text strings in Vue在 Vue 中编译内联文本字符串
【发布时间】：2017-05-29 10:31:31
【问题描述】：

我正在用 Vue 构建一个简单的应用程序。这很简单，我不使用组件。

我将文本字符串存储在配置对象中，以便于更改：

var config = {
    orderInvalid: "Order {{ order.id }} is invalid"
}

在 Vue 对象中，我将该数据推送到通用错误变量中：

if(orderInvalid(orderNumber)){
    this.errorMessage = config.orderInvalid;
}

我的 HTML 显示此错误：

<h1>{{ this.errorMessage }}</h1>

问题在于它没有解析{{ order.id }} 并按字面显示该字符串。有没有解决的办法？我需要 {{ order.id }} 作为实际的订单 ID。我在看vue.compile，但它抛出了关于缺少根元素的各种错误。我猜它是用于组件的？

【问题讨论】：

【解决方案1】：

var config 对象的orderInvalid 属性是一个字符串，即"Order {{ order.id }} is invalid"

所以当您使用<h1>{{ this.errorMessage }}</h1> 时，您只需使用<h1>{{ "Order {{ order.id }} is invalid" }}</h1>

所以我推荐使用这个：

var config = {
    orderInvalid: function(orderId){
        return "Order " + orderId + " is invalid"
    } 
}

然后

if(orderInvalid(orderNumber)){
    this.errorMessage = config.orderInvalid(orderNumber);
}

【讨论】：

【解决方案2】：

这个怎么样

orderInvalid: "Order " + order.id + " is invalid"

【讨论】：

【解决方案3】：

Handlebars 或双胡须 {{ }} 在 html 中用于在 html 标签中使用 JS 代码。它主要是在 HTML 代码中包含 JavaScript 对象的语法糖。

没有必要在 JavaScript 代码本身中使用它们。如果您在 JavaScript 代码中编写 Handlebars，则 JavaScript 解释器无法解释该符号，因此会出现错误。

在您的情况下，解决方案应该很简单：

var config = {
    orderInvalid: "Order " + {{ order.id }} + " is invalid"
}

更新：

var config = {
    orderInvalid: "Order " + order.id + " is invalid"
}

【讨论】：