vuejs使用v-if隐藏不需要的内容，生成的html标签中有<!----->，请问怎样去掉这些注释？

Question

数据量过大（6000多条数据）时，vuejs使用v-if隐藏不需要的内容，但是生成的html标签中会多出很多<!----->注释的内容，加上这些内容HTML标签总共有12MB以上，去掉后只有2M，请问怎样去掉这些注释？

开发的框架是Vue，用elementui组件。

//下面是修改的elementui的源码的代码
<el-checkbox-group
        v-model="checked"
        v-show="!hasNoMatch && data.length > 0"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list"
        :isShow="isShowItem(item,filteredData)">
        <span 
          v-for="item in filteredData"
          :key="item[keyProp]"
          v-if="isShowItem(item,filteredData)">
          <el-checkbox
            class="el-transfer-panel__item"
            :label="item[keyProp]"
            :disabled="item[disabledProp]"
            :key="item[keyProp]">
            <option-content :option="item"></option-content>
          </el-checkbox>
        </span>
      </el-checkbox-group>

Answer 1

可否换个思路？
比如我说我有6000条数据 但是我只要显示前50条， 我能否只截取前50条拿去循环，而不去6000条都去循环，再用v-if来控制渲染与否？

Answer 2

1. 把数据全部放入到一个数组

2. 用filter过滤掉不应该渲染的数据项

3. 前台for渲染数据

4. 你的目的达到了

if不应该在大数据渲染的时候使用，还记得视图不应该写业务逻辑相关的代码吗。

Answer 3

顶一楼的答案，你这么多数据，需要一次显示出来吗？分页原理明白吧？这个跟分页一样进行一下操作可以吗？然后再去渲染

Answer 4

1楼说得对，逻辑处理不应该放在视图层，而是把需要用到的数据处理好才在视图层渲染