Vue.js中无效的计算循环

Question

我有如下数组：

return {
   items: [
      { active: false, text: 'text1', textOutput: ''},
      { active: false, text: 'text1', textOutput: ''},
      { active: false, text: 'text1', textOutput: ''},
      ...
   ],
}

现在，此数组的目的是使用如下计算的属性将数据输出到DOM。

我只想输出active：true的数据，它正在更改Web其他部分的onclick，因此计算出的resultDOM正在监视此更改，并且仅更改items.active="true" 。 另外，我使用文本字段来更改items.text[i]值。

computed: {
 resultDOM () {
        for (var i=0; i<this.items.length; i++) {
          if (this.items[i].active) {
            this.items[i].textOutput = '<li>' + this.items[i].text + '</li>'
            console.log('bam')
          }
          else {
            this.items[i].textOutput = ''
            console.log('bam else')
          }          
        }
        var output=''
        for (var i=0; i<this.items.length; i++) {
          output = output + this.items[i].textOutput
        }
        return output
 }
}

问题在于，这需要花费一些时间来执行，并且每当我仅将计算出的一个有效值更改为true（或items.text值）时，便会对表的每个元素进行检查，因此这是非常无效的。 请问提示，我应该如何改进代码以提高效率？ 正确的做法是什么？

编辑：

<div  v-html="resultDOM"></div>

Answer 1

如果您利用条件渲染和v-for指令，则可以完全避免使用computed ：

 const app = new Vue({ el: "#app", data: { items: [ { active: true, text: 'text1',}, { active: true, text: 'text2',}, { active: false, text: 'text3',}, ], }, }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <ul> <li v-for="item in items" v-if="item.active" v-text="item.text"></li> </ul> </div> 

jsfiddle