【问题标题】：Vue.js escape double colonVue.js 转义双冒号
【发布时间】：2018-04-04 20:07:37
【问题描述】：

下面显示的代码是用 vue.js 编写的。

是否有可能创建 mailto-link？
Vue 不像看起来那样喜欢 mailto:item.url 中的双冒号 :。

Vue.component('my-component', {
  props: ['item'],
  template: `
    <div class="foo">
      <a v-bind:href="mailto:item.url">
        {{ item.url }}
      </a>
    </div>
  `
});

【问题讨论】：

标签： javascript vue.js escaping

【解决方案1】：

Vuejs 没有逃脱双冒号。你在v-bind:href="..."里面写的不是字符串，而是javascript代码。

mailto:item.url 不是有效的 JavaScript 代码。所以你必须使用语言工具来构造一个字符串。

构造该字符串的另一种解决方案：

使用 ES6 Template Literals - 更简洁的语法。
您不必显式声明v-bind:href。您可以使用简写 :href。这更标准，更易读。

查看代码：

<a :href="`mailto:${item.url}`">

编辑 1

您已经将整个template 放入template string。 It is possible to nest template literal inside another template literal expression。

您认为使用模板字面量是否有助于提高代码的可读性，这取决于个人喜好。

当您使用简单的模板形式时，这种情况可能更值得商榷。当使用配置了vue-loader 的webpack boilerplate 时，它更具可读性。

【讨论】：

template-Property 已在我的代码示例中使用 模板文字。那么我们如何在 Template Literals 中使用 Template Literals 呢？
在答案中添加了对该评论的引用。基本上这是可能的，你可以看到一个指向另一个 stackoverflow 问题的链接。

【解决方案2】：

我自己发现以下代码有效：

v-bind:href="'mailto:' + item.mail"

【讨论】：

如果您已经在模板文字中，则此解决方案有效。如果你看这个问题，情况就是这样。