VUE-动态添加删除

EstherNi

已于 2023-04-18 17:04:02 修改

阅读量553

点赞数 2

分类专栏： VUE 文章标签： html js css vue

于 2020-07-09 17:51:41 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/107234224

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果一：
在这里插入图片描述

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>
<body>
<button onclick="delcte()">删除</button>
<table id="tab" width="500" border="1">
    <tr>
        <th><input type="checkbox"></th>
        <th>序号</th>
        <th>姓名</th>
        <td>操作</td>
    </tr>
    <tr class="bb">
        <th><input type="checkbox" class="aa"></th>
        <td>1</td>
        <td>111</td>
        <td><a  href="#">Del</a></td>
    </tr>
    <tr class="bb">
        <th><input type="checkbox" class="aa"></th>
        <td>2</td>
        <td>22</td>
        <td><a  href="#">Del</a></td>
    </tr>
    <tr class="bb">
        <th><input type="checkbox" class="aa"></th>
        <td>3</td>
        <td>333</td>
        <td><a  href="#">Del</a></td>
    </tr>
    <tr class="bb">
        <th><input type="checkbox" class="aa"></th>
        <td>4</td>
        <td>444</td>
        <td><a  href="#">Del</a></td>
    </tr>
    <tr class="bb">
        <th><input type="checkbox" class="aa"></th>
        <td>4</td>
        <td>555</td>
        <td><a href="#">Del</a></td>
    </tr>
</table>
<script>

    function delcte(){
        var items=$(".aa:checked");
        var len=items.length;
        for(var i=0; i<len; i++){
            $(items[i]).parents(".bb").remove();
        }
    }

    //点击每一项的最后del可删除当前一项
    var aa = $('a');
    aa.click(function () {
        $(this).parents(".bb").remove();
    })


</script>
</body>
</html>

效果二：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        [v-cloak]{
            display: none;
        }
        table{
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }
        table th,table td{
            background: #0094ff;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        table td{
            background: #fff;
            color: red;
        }
    </style>


</head>
<body>


<div id="app">

    <div style="text-align: center;">
        <input type="text" v-model="id">
        <input type="text" v-model="pname">
        <button @click="addData">添加</button>
    </div>



    <table>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-if="list.length == 0">
            <td colspan="4">当前列表无数据</td>
        </tr>
        <tr v-for="(item,index) in list">
            <td>{{item.id}}</td>
            <td>{{item.pname}}</td>
            <td>{{item.ctime}}</td>
            <td>
                <!-- 方法一 -->
                <!-- <a href="#" @click="delData(index)">删除</a> -->
                <!-- 方法二 -->
                <a href="#" @click="delData(item.id)">删除</a>
            </td>
        </tr>
    </table>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: 0,
            pname: '',
            list: [
                {id: 1, pname: '奔驰1', ctime: new Date}
            ]
        },
        methods: {
            addData(){
                // 包装成list要求的对象
                var p = {id: this.id, pname: this.pname, ctime: new Date()}
                this.list.push(p);
                // 清空文本框中的数据
                this.id =  0;
                this.pname = '';

            },
            delData: function(index){
                if(!confirm('是否要删除当前数据')){
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                // 方法一
                // this.list.splice(index,1);
                // 方法二：
                // 根据 id 获取要删除的索引，方法一是直接传入删除数组的索引
                var index = this.list.findIndex(function(item){
                    return item.id == index;
                });
                this.list.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

效果三：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书馆增加书</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		ul{
			list-style: none;
			width:100px;
			height:auto;
		}

		.buttonstylelist{
			width:80px;
			height:30px;
			border:1px solid blue;
			color:#fff;
			background: blue;
		}
	</style>
</head>
<body>
<div id="app">
	<ul>
		<li v-for = "todo in todos" v-bind:style="stylelist">
			<span>{{todo.text}}</span>
		</li>
	</ul>
	<input type="text" v-on:keyup.enter="addTodo" v-model="message"/>
	<button v-on:click = "add" v-bind:class="buttonStyle">增加书籍</button>
	<button v-on:click="remove" v-bind:class="buttonStyle">删除</button>
</div>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			todos:[{text:'红楼梦'},{text:'水浒传'}],
			message:'',
			stylelist:{
				height:'30px',
				lineHeight:'30px',
				border:'1px solid red',
				textAlign:'center',
				background:'pink',
				color:'red'
			},
			buttonStyle:{
				'buttonstylelist':true
			}
		},
		methods:{
			remove:function(index){
				this.todos.splice(index,1)
			},
			addTodo:function(){
				var text = this.message.trim();
				if(text){
					this.todos.push({text:text});
					this.message=" ";
				}
			},
			add:function(){
				var text = this.message.trim();
				if(text){
					this.todos.push({text:text});
					this.message=" ";
				}
			}
		}
	})
</script>
</body>
</html>