用vue实现增删改查

最新推荐文章于 2024-09-12 12:37:49 发布

学前端真的泰裤辣！！！

最新推荐文章于 2024-09-12 12:37:49 发布

阅读量3.1k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64344470/article/details/130565245

版权

1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测试。它返回的是⼀个Boolean类型的值

2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。否则返回 undefined。

3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此⽅法会改变原数组。

4、 includes() ⽅法⽤于判断⼀个字符串是否包含在另⼀个字符串中，根据情况返回 true 或 false。

5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。

6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入所需的库-->
    <script src="../vue-2.4.0.js"></script>
    <script src="../jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        .gg{
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 版心 -->
        <div class="container">
            
            
            <div class="modal " id="modal-id">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Name</h4>
                        </div>
                        <div class="modal-body">
                            <label for="">请输入要更改的：</label>

                            <input type="text" v-model="carChange" >
                        </div>
                        <div class="modal-footer" >
                            
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary"  data-dismiss='modal' @click="change()">修改保存</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="panel panel-info">
                  <div class="panel-heading">
                        <h3 class="panel-title">添加品牌</h3>
                  </div>
                  <div class="panel-body">
                       
                       <form action="" method="POST"  class="form-inline" role="form">
                        <!-- id -->
                        <div class="form-group">
                            <label for="">Id：</label>
                            <input type="number" class="form-control" id="" placeholder="请输入ID" v-model="carId">
                        </div>

                        <!-- name -->
                        <div class="form-group">
                            <label for="">Name：</label>
                            <input type="text" class="form-control" id="" placeholder="请输入品牌名" v-model="carName">
                        </div>                       
    
                        <!-- 添加按钮 -->
                        <button type="button" class="btn btn-primary" @click="add">添加品牌</button>

                        <!-- 查找 -->
                        <div class="form-group">
                            <label for="">搜索关键字</label>
                            <input @keyup='search' type="text" class="form-control" id="" placeholder="请输入要搜索的关键字"  v-model="keySearch">
                        </div>    
                       </form>
                       
                    
                       <!-- 表格区域 -->
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Ctime</th>
                                <th>Operation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in search()" :key="item.carId">
                                <td>{{item.carId}}</td>
                                <td>{{item.carName}}</td>
                                <td>{{item.Time}}</td>
                                <td>
                                <button type="button" class="btn btn-default" @click="del(item)">删除</button>
                                <button type="button" class="btn btn-default gg"><a class="btn btn-primary" data-toggle="modal" href='#modal-id' @click="modify(item)">修改数据</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                  </div>
            </div>
            


        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#app',

        data:{
            list:[
                {
                    carId:1,
                    carName:'奔驰',
                    Time:new Date()
                },
                {
                    carId:2,
                    carName:'宝马',
                    Time:new Date()
                },                
            ],

            carId:'',
            carName:'',
            Time:'',
            keySearch:'',
            carChange:'',
            
            index:''

        },
        methods:{
            // 添加按钮
            add(){
                // 新建一个对象
                let obj={
                    carId:this.carId,
                    carName:this.carName,
                    Time:new Date()
                }
                // some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测试。
                // 它返回的是⼀个Boolean类型的值

                // 利用这个方法来判断它里面是否拥有这个值
                
                console.log();
                if(this.list.some(item=>item.carId==this.carId||this.carId==0)){
                    alert('Id是唯一值，不能重复')
                }else{
                    this.list.push(obj)
                }
                // 点击后将框的值赋空
                this.carId=''
                this.carName=''
            },
            
            // 删除按钮
            del(item){
                // splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,
                // 并以数组形式返回被 修改的内容。此⽅法会改变原数组
                this.list.splice(this.list.indexOf(item),1)
                
                
            },

            // 搜索按钮
            search(){
                // filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
                //  indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。  
                //  includes() ⽅法⽤于判断⼀个字符串是否包含在另⼀个字符串中，根据情况返回 true 或 false。
                return this.list.filter(item=>{
                    return item.carName.includes(this.keySearch)
                })
            },

            // 更改

            modify(item){
                this.index=(this.list.indexOf(item))
            },

            // 确认更改
            change(){
                
                this.list[this.index].carName=this.carChange
                alert('修改成功')
                $('#modal-id').hide()
            },

            
        }
    })
</script>
</html>