Vue.js：如何根据另一属性批量控制对应属性集合的显隐

架构老林

2026-5-15

解决Vue中动态属性赋值的问题

你遇到的核心问题是没法通过动态生成的属性名直接给Vue实例的属性赋值——this.divReports+eval(...)或者this.eval(divName)这类写法都是错误的。在JavaScript（包括Vue）里，想要通过变量访问对象属性，得用方括号语法，完全没必要用不安全的eval。

正确的赋值写法

你已经拿到了divName变量（比如'divReports0'），直接通过this[divName]就能访问对应的Vue属性，然后赋值就行：

showHideDivision: function() { 
  for (var j=0; j < this.reportsList.length; j++) { 
    var divName = 'divReports' + this.reportsList[j]['value']; 
    if (this.reportsList[j]['value'] == this.selectedReport) { 
      console.log('Show:' + divName ); 
      this[divName] = true; // 用方括号访问动态属性名并赋值
    } else { 
      console.log('Hide:' + divName ); 
      this[divName] = false; // 隐藏时赋值为false
    } 
  } 
},

额外的补充说明

方括号语法的原理
Vue实例本质就是个JavaScript对象，对象属性支持对象[属性名变量]的方式访问和修改，这是JS的基础语法。和固定的点语法（this.divReports0）不同，方括号语法能处理动态变化的属性名，完美适配你的场景。
响应式的注意点
要确保divReports0、divReports1这些属性已经在Vue实例的data里声明过，比如：
```
data() {
  return {
    selectedReport: '',
    divReports0: false,
    divReports1: false,
    // ... 其他divReports属性
    reportsList: [...]
  }
}
```
如果这些属性是后续动态添加的，就得用Vue.set(this, divName, true)来保证响应式（不然Vue监听不到属性变化，视图不会更新）。不过根据你的描述，这些属性本来就是模型里的，直接赋值就没问题。
代码简化小技巧
你还能把条件判断简化成一行，让代码更清爽：
```
this[divName] = (this.reportsList[j]['value'] === this.selectedReport);
```