Vue静态增删改查加批量删除

最新推荐文章于 2023-10-06 18:15:04 发布

jq1223

最新推荐文章于 2023-10-06 18:15:04 发布

阅读量423

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/jq1223/article/details/114270154

版权

Vue 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

展示：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        姓名：<input type="text" v-model="addname"/>
        年龄：<input type="text" v-model="addage"/>
        <input type="button" @click="add" value="添加"/>
        <input type="button" @click="deleteBatch" value="批量删除"/>
        
        <table border="1" width="400px" style="text-align: center" v-show="list.length>0">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(user,index) in list">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <input type="button" @click="del(index)" value="删除"/>
                    <input type="button" @click="huixian(index)" value="回显"/>
					        <input type="button" @click="upd" value="修改"/>

                </td>
            </tr>
        </table>

        <p v-show="list.length==0" style="color: red"><b>没有数据！</b></p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addname:"",
            addage:"",
            xiabiao:"",
            list:[
                {"name":"张三","age":18},
                {"name":"李四","age":28},
                {"name":"王五","age":38}
            ]
        },
        methods:{
            // 添加
            add:function (){
                this.list.push({"name":this.addname,"age":this.addage})
                this.addname = "";
                this.addage = "";
            },
            // 删除
            del:function (index){
                if (confirm("您确定要删除吗？")){
                    this.list.splice(index,1);
                }
            },
            // 回显
            huixian:function (index) {
                this.addname = this.list[index].name;
                this.addage = this.list[index].age;
                this.xiabiao = index;
            },
            // 修改
            upd:function () {
                this.list[this.xiabiao].name = this.addname;
                this.list[this.xiabiao].age = this.addage;
                this.addname = "";
                this.addage = "";
            },
            // 批量删除
            deleteBatch:function () {
                if (confirm("您确定都要删除吗？")) {
                    this.list = [];
                }
            }
            
        }
    })
</script>
</html>