javascript - 使用Vue2 JS的基本计算数据值有什么问题？

我已经在线上学习了一个教程，该教程使用计算数据来输出名字和姓氏。我的代码相同，但是呈现的结果不同。目前，它会将$之后的内容看作是字符串，而不是分配的数据。 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>
    `
})

最佳答案

JS template literal使用反引号而不是单引号。

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