uniapp 动态添加删除属性块

在UniApp中，动态地添加和删除属性块可以通过几种方式实现。

首先，可以使用Vue.js的响应式数据对象来动态添加和删除属性块。通过在data对象中定义一个空对象，并使用Vue.set方法来动态添加属性块。例如：

<template>
  <div>
    <div v-for="block in blocks" :key="block.id">
      <input v-model="block.name">
      <button @click="removeBlock(block.id)">删除</button>
    </div>
    <button @click="addBlock">添加属性块</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blocks: []
    }
  },
  methods: {
    addBlock() {
      this.blocks.push({ id: this.blocks.length + 1, name: '' });
    },
    removeBlock(id) {
      const index = this.blocks.findIndex(block => block.id === id);
      this.blocks.splice(index, 1);
    }
  }
}
</script>

通过在模板中使用v-for指令遍历blocks数组，可以动态展示属性块。点击"添加属性块"按钮时，会调用addBlock方法，在blocks数组中添加一个新的属性块对象。点击"删除"按钮时，会调用removeBlock方法，根据属性块的id找到对应的索引位置，从数组中删除该属性块。

另一种方法是直接使用JavaScript的原生方法来动态添加和删除属性块。通过在methods中定义addBlock和removeBlock方法，可以使用JavaScript的对象操作方法来实现动态添加和删除属性块。例如：

<template>
  <div>
    <div v-for="(value, key) in blocks" :key="key">
      <input v-model="blocks[key]">
      <button @click="removeBlock(key)">删除</button>
    </div>
    <button @click="addBlock">添加属性块</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blocks: {}
    }
  },
  methods: {
    addBlock() {
      const key = Object.keys(this.blocks).length;
      this.$set(this.blocks, key, '');
    },
    removeBlock(key) {
      this.$delete(this.blocks, key);
    }
  }
}
</script>

通过在模板中使用v-for指令遍历blocks对象的键值对，即属性块的key和value。点击"添加属性块"按钮时，会调用addBlock方法，使用$set方法将新的属性块添加到blocks对象中。点击"删除"按钮时，会调用removeBlock方法，使用$delete方法从blocks对象中删除对应的属性块。

以上是在UniApp中动态添加和删除属性块的两种方法，可以根据具体场景选择适合的方式来实现。