使用 Vue2 JS 的这个基本计算数据值有什么问题

Question

我在线学习了一个教程，该教程使用计算数据输出名字和姓氏。我的代码是相同的，但呈现的结果是不同的。目前，它将 $ 后面的内容视为只是一个字符串，而不是分配的数据。https://screenshots.firefox.com/pDElTgV9EB58BjbS/127.0.0.1 我做错了什么？

const app = new Vue({
    el: "#app",
    data: {
        bobby: {
            first: "Bobby",
            last: "Boone",
            age: 25
        },
        john: {
            first: "John",
            last: "Boone",
            age: 35,
        }
    },
    computed: {
        bobbyFullName() {
            return '${this.bobby.first} ${this.bobby.last}'
        },
        johnFullName() {
            return '${this.john.first} ${this.john.last}'
        }
    },
    template: `
    <div>
        <h1>Name: {{bobbyFullName}}</h1>
        <p>Age {{bobby.age}}</p>
        <h1>Name: {{johnFullName}}</h1>
        <p>Age {{john.age}}</p>
    </div>
    `
}) 

Answer 1

JS 模板文字使用反引号而不是单引号。

computed: {
    bobbyFullName() {
        return `${this.bobby.first} ${this.bobby.last}`;
    },
    johnFullName() {
        return `${this.john.first} ${this.john.last}`;
    }
}