vue实现div块的循环添加以及删除块

想了一下div块循环和switch选择联动写一起动态绑值实现代码有些多不便于理解，所以先拆开实现一些基础的小示例

废话不多说，直接上代码：

<template>
<div>
    <el-button type="primary" 
               icon="el-icon-circle-plus-outline"  
               @click="addBlock">添加</el-button>
    <div v-for="(item, index) in block"
         style="overflow:hidden"
         :key="index">
        <el-input style="float:left"/>
        <el-button type="danger" 
                   style="float:left;margin-left:10px;"
                   icon="el-icon-delete"  
                   @click="delBlock">删除</el-button>            
    </div>
</div>
</template>

<script>
export default {
  data(){
    return:{
       block:[]
    };
  },
  methods:{
    addBlock(){
       this.block.push({});
    },
    delBlock(){
       this.block.splice(index, 1);
    }
  }
}
</script>

最后

以上就是土豪咖啡为你收集整理的vue实现div块的循环添加以及删除块的全部内容，希望文章能够帮你解决vue实现div块的循环添加以及删除块所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。