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

Posted 2023-02-23

【中文标题】按钮无法在 Vue 中应用模板语法

【英文标题】：Button can't apply Template Syntax in Vue

【发布时间】：2021-01-21 04:05:48

【问题描述】：

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

Generated Page

我的代码：

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

【参考方案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>    

【参考方案2】：

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

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

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