Vue 点击添加一行和删除一行

我用的是：vue + element ui 直接代码。

html：

<template><el-main><el-button type="primary" @click="add">增加更多</el-button><el-col :span="24" class="warp-main"><el-form :inline="true" class="demo-form-inline" v-for="(item, index) in formArr" :key="index"><el-form-item label="样例"><el-input v-model="item.value"></el-input></el-form-item><el-button type="primary" @click="del(index)">删除</el-button></el-form></el-col></el-main>
</template>

逻辑：

<script>
export default {data () {return {formArr: [{value: ''}]}},methods: {add() {this.formArr.push({value: ''})console.log(this.formArr)},del(index) {this.formArr.splice(index, 1)}}
}
</script>

注释：

通过对数组的操作，进行添加和删除；

Vue 点击添加一行和删除一行相关推荐

vim之添加多行和删除多行
vim之添加多行和删除多行 1.复制单行和多行. 1)单行复制在命令模式下,将光标移到将要复制的行处,按"yy"进行复制,按"p"进行粘贴. 2)多行复制在 ...
jQuery动态增加表格一行和删除一行
今天在处理表格的动态增加一行,和删除一行,一开始用js,但是写起来有点复杂,而且不好控制,最后还是用了jQuery,很轻松的就搞定了,代码如下: $(document).ready(function( ...
vue中点击添加class，双击去掉class
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...
vue 点击添加多个input及多个关键字
<template> <div><div class="input-info"><el-button type="primary ...
html删除一行增加一行,html怎么增加一行
html增加一行的方法:首先创建一个HTML示例文件:然后通过table标签创建一张表格:最后通过js代码"function addRow() {...}"方法使表格增加一行即可. ...
【HTML5】页面点击按钮添加一行删除一行全选反选全不选
页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html><head>< ...
利用jquery给指定的table动态添加一行、删除一行
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr"). ...
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行
场景效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现首先页面添加 ...
使用Bootstrap + Vue.js实现添加删除数据
界面首先需要引入bootstrap的css和vue.js,jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 C ...

Vue 点击添加一行和删除一行

Vue 点击添加一行和删除一行相关推荐

最新文章

热门文章