javascript - 按钮无法在 Vue 中应用模板语法

Question

我对我的 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: "[e-mail]",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    },
  },
  computed: {
    toggleButtonText() {
      let innerText = this.detailsAreVisible ? "Hide" : "Show";
      return innerText + " Details";
    },
  },
};
</script>

标签： javascripthtmlvue.jscomponentsvue-component

Answer 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: "[e-mail]",
      },
    };
  },
        })
        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>