Javascript 按钮可以'；无法在Vue中应用模板语法

我对我的Vue组件中的代码感到非常困惑，因为除了一个只将模板语法显示为纯HTML的按钮之外，任何元素都应用了

{{title}}

中的模板

我的代码：

<template>
  <li>
    <h2>{{ friend.name }}</h2>
    <!-- this button has the {{ title }} in it, but vue wont render it when generating the page -->
    <button>{‌{ title }}</button>
    <!-- this p-tag on the other hand got the same syntax template and works just fint -->
    <p>{{ title }}</p>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone: </strong>{{ friend.phone }}</li>
      <li><strong>Email: </strong>{{ friend.email }}</li>
    </ul>
  </li>
</template>
    
    <script>
export default {
  data() {
    return {
      //this the string that should be inside the button
      title: "HELLO",
      detailsAreVisible: false,
      friend: {
        id: "max",
        name: "Max Musterman",
        phone: "0151 2548 425",
        email: "max@localhost.de",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    },
  },
  computed: {
    toggleButtonText() {
      let innerText = this.detailsAreVisible ? "Hide" : "Show";
      return innerText + " Details";
    },
  },
};
</script>

{{friend.name}
{‌{title}}
{{title}}


电话：{{{friend.Phone}
电子邮件：{{{friend.Email}


导出默认值{
数据（）{
返回{
//这是应该位于按钮内部的字符串
标题：“你好”，
可以证明的细节：错，
朋友:{
id:“max”，
姓名：“Max Musterman”，
电话：01512548425，
电子邮件：“max@localhost.de",
},
};
},
方法：{
toggleDetails（）{
this.detailsarevible=！this.detailsarevible；
},
},
计算：{
toggleButtonText（）{
让innerText=this.detailsRevible？“隐藏”：“显示”；
返回innerText+“详细信息”；
},
},
};

在按钮的第一个

{{

之间有一些字符。如果检查第一个

{{

中有多少字符，您会看到3个字符，而不是2个字符。 你可以在这里的图片中看到，你有一些字符之间（我只是复制它和我看到的）

只需删除它并再次键入：-）。这可能是由于某些复制粘贴或类似的原因

或者您可以从这里复制它并粘贴到您的代码中，它应该可以正常工作

---

{{title}}

在按钮的第一个

{{

之间有一些字符。如果检查第一个

{{

中有多少个字符，您会看到3个字符，而不是2个字符。 你可以在这里的图片中看到，你有一些字符之间（我只是复制它和我看到的）

只需删除它并再次键入：-）。这可能是由于某些复制粘贴或类似的原因

或者您可以从这里复制它并粘贴到您的代码中，它应该可以正常工作

---

{{title}}

当您复制经过{{title}}一个

点

也经过括号之间时，这就是它不显示的原因。

const-app=新的Vue({
数据（）{
返回{
//这是应该位于按钮内部的字符串
标题：“你好”，
可以证明的细节：错，
朋友:{
id:“max”，
姓名：“Max Musterman”，
电话：01512548425，
电子邮件：“max@localhost.de",
},
};
},
})
app.$mount（“#app”）

{{friend.name}
{{title}}
{{title}}


电话：{{{friend.Phone}
电子邮件：{{{friend.Email}

当你复制超过{{title}}一个

点

也超过括号之间，这就是它不显示的原因。

const-app=新的Vue({
数据（）{
返回{
//这是应该位于按钮内部的字符串
标题：“你好”，
可以证明的细节：错，
朋友:{
id:“max”，
姓名：“Max Musterman”，
电话：01512548425，
电子邮件：“max@localhost.de",
},
};
},
})
app.$mount（“#app”）

{{friend.name}
{{title}}
{{title}}


电话：{{{friend.Phone}
电子邮件：{{{friend.Email}