javascript - 这个使用 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 template literal使用反引号而不是单引号。

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