Vue.js动态变量替换：能否通过{{ region }}调用对应data对象属性？

嘿，直接给你结论：{{ #region.copy }}这种写法在Vue.js里完全不生效，这是Handlebars这类其他模板引擎的语法，Vue的模板系统根本不认识它。

假设你的data结构是这样的（先明确结构方便后续理解）：

export default {
  data() {
    return {
      region: 'north', // 动态取值：north/south/east/west
      north: { copy: '北方区域专属文案' },
      south: { copy: '南方区域专属文案' },
      east: { copy: '东方区域专属文案' },
      west: { copy: '西方区域专属文案' }
    }
  }
}

方案1：模板中直接动态访问属性 #

Vue模板支持用方括号语法来动态访问对象属性，你可以直接在模板里这么写：

{{ $data[region].copy }}

或者省略$data（模板里默认可以直接访问data中的属性），写成：

{{ this[region].copy }}

逻辑很简单：region的值是字符串（比如'north'），this[region]就等价于this.north，再访问.copy就能拿到对应区域的文案。

方案2：用计算属性封装（更推荐） #

如果需要处理边界情况（比如region的值不在预期范围内时显示默认文案），或者想让模板更简洁，强烈推荐用计算属性：

export default {
  data() {
    // 同上的data内容
  },
  computed: {
    currentRegionCopy() {
      // 用可选链操作符?.避免region不存在时抛出错误
      return this[this.region]?.copy || '默认区域文案'
    }
  }
}

然后模板里直接调用这个计算属性就行：

{{ currentRegionCopy }}

这种方式不仅代码更清晰，还能优雅处理异常情况，比如当region是一个不在预设范围内的值时，会自动显示默认文案，避免页面报错。

为什么你的写法不行？ #

Vue里的#符号有特定的用途：

• 用来给v-for的作用域插槽指定别名（比如<template v-for="item in list" #default="{ item }">）
• 用来指定<Teleport>组件的目标元素（比如<Teleport to="#modal-container">）
  它完全不是用来动态访问对象属性的语法，所以{{ #region.copy }}会被Vue当成普通文本解析，根本达不到你想要的动态调用效果。

内容的提问来源于stack exchange，提问作者LeBlaireau