在反引号中返回的vue.js计算方法未在模板中解析

Question

我一直在关注这个vue.js教程：

https://youtu.be/h6lhOYv-QM4?t=1m56s

但是很早就遇到了一个奇怪的问题。 我正在使用带有标准index.html文件和app.js文件的静态设置。

这是JS：

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>

        <h3>Name:  {{ bobbyFullName }}</h3>
        <h3>Age:   {{ bobby.age }}</h3>

        <h3>Name:  {{ johnFullName }}</h3>
        <h3>Age:   {{ john.age }}</h3>

    </div>
    `
});

预期产量：

Name: Bobby Boone
Age: 25
Name: John Boone
Age: 30

实际输出：

Name: $(this.bobby.first) $(this.bobby.last)
Age: 25
Name: $(this.john.first) $(this.john.last)
Age: 30

理念

可能是因为他们在本教程中使用的是本地服务器，而我却使用了静态设置？

（或者它是ES6的东西？我知道反引号是ES6的一部分，但是在本教程中它们似乎没有为ES6放置任何东西。我能看到的唯一区别是本地服务器。）

如果我不使用反引号，它将起作用：

 computed: {
    bobbyFullName() {
        return this.bobby.first + ' ' + this.bobby.last
    },
    johnFullName() {
        return this.john.first + ' ' + this.john.last
    }
  }, 

Answer 1

错误是您使用括号“ （） ”代替大括号“ {} ”

尝试：

bobbyFullName() {
        return this.bobby.first + ' ' +  this.bobby.last
    }

要么 ：

bobbyFullName() {
        return `${this.bobby.first} ${this.bobby.last}`
    }

Answer 2

JavaScript模板字符串使用{}而不是（）

因此正确的代码将是：

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

Answer 3

问题出在： bobbyFullName() { return $（this.bobby.first）$（this.bobby.last） }, johnFullName() { return $（this.john.first）$（this.john.last） }

应该是： bobbyFullName() { return $ {this.bobby.first} $ {this.bobby.last} }, johnFullName() { return $ {this.john.first} $ {this.john.last} }