vue2中${year}报错

在 Vue2 中，如果你想在模板中使用 JavaScript 表达式，可以使用插值表达式，即将 JavaScript 表达式包裹在一对大括号中。例如：

<p>{{ year }}</p>

在这个例子中，`year` 是一个在 Vue 实例中定义的变量。如果你想要在模板中使用字符串模板，可以使用反引号（`` ` ``）来包裹字符串，并在其中使用 `${}` 来包裹 JavaScript 表达式。例如：

<p>${year}</p>

但是在 Vue2 中，这种写法会出现错误提示：

[Vue warn]: Property or method "year" is not defined on the instance but referenced during render.

这是因为在 Vue2 中，模板中的 JavaScript 表达式只能访问 Vue 实例中定义的数据和方法，而不能直接访问 JavaScript 全局作用域中的变量。因此，如果你想在模板中使用字符串模板来渲染数据，应该使用计算属性或者方法来生成对应的字符串，然后在模板中使用这些计算属性或者方法。例如：

<template>
  <p>{{ formattedYear }}</p>
</template>

<script>
export default {
  data() {
    return {
      year: 2022
    };
  },
  computed: {
    formattedYear() {
      return `${this.year}`;
    }
  }
};
</script>

在这个例子中，我们定义了一个计算属性 `formattedYear`，它返回一个字符串模板，其中使用 `${}` 来包裹 Vue 实例中的变量 `year`。然后在模板中使用这个计算属性来渲染数据。这样就可以避免上述错误提示。