vue简易的增删

最新推荐文章于 2024-10-21 16:47:41 发布

sslcsq

最新推荐文章于 2024-10-21 16:47:41 发布

阅读量123

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/sslcsq/article/details/103594208

话不多说还是直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        table th{
            text-align: center;
            font-weight: 700;
            color: rgb(122, 6, 6);
        }
        table td{
            text-align: center;
        }
        table tfoot td{
            text-align: right;
        }
         table tfoot .center{
            text-align: center;
            background: #eeeeee;
        }
    </style>
</head>
<body>
    <div id="ssl">
        <form role="form">
            <div class="form-group">
                <label for="name">用户名:</label>
                <input type="text" class="form-control" id="name" placeholder="输入用户名" v-model="name">
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="text" class="form-control" id="age" placeholder="输入年龄" v-model="age">
            </div>
            <button type="button" class="btn btn-primary" @click="add()">添加</button>
            <button type="button" class="btn btn-danger" @click="set()">重置</button>
        </form>
        <!--  -->
        <table class="table table-bordered">
            <caption :style="{textAlign:'center',fontSize:'32px',color:'#31708F'}">用户信息表</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
               <tr v-for="(e,i) in list" :key="i">
                   <td>{{i+1}}</td>
                   <td>{{e.name}}</td>
                   <td>{{e.age}}</td>
                   <td><button type="button" class="btn btn-primary" @click="del(i)">删除</button></td>
               </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" v-if="list.length!=0">
                        <button type="button" class="btn btn-danger" @click="delAll()">删除全部</button>
                    </td>
                    <td colspan="4" v-if="list.length==0" class="center">
                        数据为空...
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#ssl",
        data:{
            name:"",
            age:"",
            list:JSON.parse(localStorage.getItem("list"))||[]
        },
        methods:{
            add()
            {
                if(this.name=="" || this.age=="")
                {
                    alert("输入的信息不能为空");
                }
                else
                {
                    let obj={
                        name:this.name,
                        age:this.age
                    }
                    this.list.push(obj);
                    this.name=this.age="";
                }
                localStorage.setItem("list",JSON.stringify(this.list))
            },
            del(i)
            {
                this.list.splice(i,1);
                localStorage.setItem("list", JSON.stringify(this.list))
            },
            set()
            {
                this.name=this.age="";
                localStorage.setItem("list", JSON.stringify(this.list))
            },
            delAll()
            {
                this.list=[];
                localStorage.setItem("list", JSON.stringify(this.list))
            }
        }
    })
</script>
</html>

在这里使用了Bootstrap写的样式使用了本地存储
在这里插入图片描述
没输入信息时显示数据为空当有数据时显示全部删除在这里我们用v-if判断list存放数据的数组长度
如果长度为零那么则表示没有数据如果不为空则表示有数据显示全部删除