Question

我的数组如下：

from operator import itemgetter

def get_something(keys):
    d = {
        "a": 1,
        "b": 2,
        "c": 3
    }
    return [d[k] for k in keys]

print(get_something(["a", "b"]))
#[1, 2]
print(get_something(["a"]))
#[1]
print(get_something([]))
#[]

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

我想只输出active：true的数据，这是在Web的其他部分更改onclick，因此计算结果DBM正在监视此更改并仅更改return { items: [ { active: false, text: 'text1', textOutput: ''}, { active: false, text: 'text1', textOutput: ''}, { active: false, text: 'text1', textOutput: ''}, ... ], }。我还使用文本字段来更改items.active="true"值。

items.text[i]

问题是这需要一些时间来执行，并且每次我只将一个active更改为true（或items.text值）时，计算正在对表的每个元素进行检查，因此它非常无效。我可以问你提示吗，我应该如何提高我的代码以提高效率？什么是正确的方法？

编辑：

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
 }
}

Answer 1

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

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

在vuejs中无效的计算循环

1 个答案: