按钮无法在 Vue 中应用模板语法答案

【问题标题】：Button can't apply Template Syntax in Vue按钮无法在 Vue 中应用模板语法
【发布时间】：2021-01-21 04:05:48
【问题描述】：

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

我的代码：

<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>

【问题讨论】：

标签： javascript html vue.js components vue-component

【解决方案1】：

当您复制过去 {{ title }} 时，一个 dot 也在括号之间过去，这就是它不显示的原因。

        const app = new Vue({
        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",
      },
    };
  },
        })
        app.$mount("#app")

     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
      
  <div id="app">
  <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>
 </div>

【讨论】：

【解决方案2】：

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

只需删除它并再次输入 :-)。这可能是由于一些复制粘贴或类似的原因

或者你可以从这里复制它并将它粘贴到你的代码中，它应该可以工作 {{ title }}

【讨论】：