删除v-for方法生成的组件的方法

一、思路

在vue:data中的数据对象添加布尔类型的属性,用来表明其是否被渲染,如果需要删除组件,就把这个属性设置为false;

在计算属性vue:computed中,根据该布尔属性过滤,生成一个新的数组,在html代码中用渲染新的数组。

二、代码示例

1、渲染部分:

<div v-for='(item,index) in showlayer' :key="index"></div>

2、数据部分:

//原始数组
data () {
    return {
      maplists: [
        {
         ...xx,
          isShow: true
        },
]}}
//数组过滤,最终被渲染的数组
computed: {
    showlayer: function () {
      return this.maplists.filter(function (layer) {
        return layer.isShow
      })
    }
  }

参考来源:https://blog.csdn.net/she_jw/article/details/105952682?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

原文地址:https://www.cnblogs.com/guoguocode/p/13471380.html