Question

我有一组名为divReports0，divReports1，divReports2等的分区。这些分区也是我的vue模型中的属性。我想根据从 selectedReport 属性中提供的SELECT框中选择的值来显示/隐藏这些分区。这是我遇到问题的代码。

    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.divReports+eval(this.reportsList[j]['value']) = true
            }   
            else
            {
                console.log('Hide:' + divName );
            }
        }

    },

我在divName变量中控制了divsion name属性。如何为divName属性赋值？（例如this.eval（divName）= false）

Answer 1

由于目标是一次只显示一个div，所以你应该有一个变量来指示要显示哪个div，而不是每个都有一个布尔值来指示它是否显示。

在任何情况下，编号变量名称（this.divReportsX，其中 X 是一个变量）几乎总是指示您应该使用数组而不是单个标量。

在下面的示例中，我使用range form of v-for来计算从1到3的div（或者你想要的多少）。有selectedReport表示显示哪个div。为了好玩，我加入了一个计算showHide，它给你一个由div编号索引的布尔值，这样你就可以使用v-show=showHide[div]

＆＃13;

new Vue({
  el: '#app',
  data: {
    howManyDivs: 3,
    selectedReport: 1
  },
  computed: {
    showHide() {
      const result = [];

      for (let i=1; i <= this.howManyDivs; ++i) {
        result[i] = i === this.selectedReport;
      }
      return result;
    }
  }
});

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <select v-model="selectedReport">
    <option v-for="div in howManyDivs" :value="div">Show {{div}}</option>
  </select>
  <div v-for="div in howManyDivs" v-show="showHide[div]">
    Report div
    <h1>** {{div}} **</h1>
  </div>
  <div v-for="div in howManyDivs">
    {{div}}: {{showHide[div]}}
  </div>
</div>

＆＃13;

Vue.js：如何根据另一个属性更改属性集

1 个答案: