vue实现增、删、改、查、批量删除的例子-CSDN博客

本文链接：https://blog.csdn.net/sgx0554/article/details/130783720
一个使用vue实现增，删，改，查，批量删除的入门实例。
<!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="./libs/vue.js"></script>
 <!-- <link rel="stylesheet" href="/lib/bootstrap.css"/>  -->
 <!-- <script src="https://unpkg.com/vue@next"></script> -->
</head>

<body>
    <h2>vue 增，删，改，查</h2>
<div id="app" ref="setall">      

    <p>
        <input type="text" id="title" placeholder="请输入书名"  v-model="bk.title">
        <input type="text"  id="author" placeholder="请输入作者" v-model="bk.author">
        <input type="text"  id="price"  placeholder="请输入价格" v-model="bk.price">
       <button @click="add">增加</button>
       <button @click="query(bk)">查询</button>       
       <button @click="querybk">查询返回</button>
       <button @click="delmul()">多行删除</button>
    </p>
    <p><input type="checkbox" class="setallbtn" @click="setallbtn($event)"/>  序号，书名，作者，价格</p>
    <p v-for="(book,key) in books">
     <input type="checkbox"  class="setbtn" @click="recordtitle(book,$event)"/> 
      {{key+1}}, 
      {{book.title}},
      {{book.author}},
      {{book.price}},
    <button @click="edit(book)">编辑</button>
    <button @click="del(book,key)">删除</button>
    
    </br>
    </p>




    <div id="edit" v-show="flag">
        <div id="title">编辑</div>
        
            <input type="text" id="title" placeholder="请输入书名" v-model="obj.title" ></br>
            <input type="text"  id="author" placeholder="请输入作者" v-model="obj.author"></br>
            <input type="text"  id="price"  placeholder="请输入价格" v-model="obj.price"></br>
            <button @click="submit()" :disable="!obj.title||!obj.author||!obj.price">确认</button>
            <button @click="flag=false">取消</button>
    </div>
      
</div>

    
 <script>
     var vm=new Vue({
     el:"#app",
     data : {  
        op:'add',  
        flag:false,
        books:[
        {title:'vue基础',author:'张三',price:30},
        {title:'vue提升',author:'李四',price:60 },
        {title:'vue高级',author:'王五',price:90 }
        ],
        bookscpy:[],//查询后，返回使用
        bookrecord:[],//单击记录booktile
        bk:{
            title:'vue基础',author:'张三',price:30 
        },
        obj:{}
         
     },
     methods:{
        //checkbox事件
        recordtitle(book,e){
            
            if(e.target.checked==true)
            {
                this.bookrecord.push(book.title);
            }
            else
            {
                this.bookrecord= this.bookrecord.filter(item=>item!=book.title);
            }
            
            console.log(this.bookrecord,this.bookrecord.length);
        },
        setallbtn(e)
        {
            let checkDom=this.$refs.setall.getElementsByClassName('setbtn');
            if(e.target.checked)
            {
                for(var i=0;i<checkDom.length;i++)
                    checkDom[i].checked=true;
                this.bookrecord=this.books.map(item=>item.title);
                console.log(this.bookrecord);

                
                    
            }
            else
            {
                for(var i=0;i<checkDom.length;i++)
                    checkDom[i].checked=false;
                this.bookrecord=[];
            }
            
        },
        //增删改查事件
        add(){
            var bk1={};
            bk1.title=this.bk.title;
            bk1.author=this.bk.author;
            bk1.price=this.bk.price;

            if(bk1.title!=""&&bk1.author!=""&&bk1.price!="")
            {
                 this.books.push(bk1);
            }
            else
            {
                alert('书名、作者或价格不能为空！');
                return;
            }
           
            this.bk.title="";
            this.bk.author="";
            this.bk.price="";

        },
        edit(book)
        {
           this.flag=true;
           this.obj={};
           this.obj.title=book.title;
           this.obj.author=book.author;
           this.obj.price=book.price;

        },
        del(book,key){
            if(confirm("确认要删除吗？")==true)
               this.books.splice(key,1);
            else
               return;

        },
        query(bk)
        {
            this.bookscpy=[...this.books];
            this.books=this.books.filter(item=>bk.title==item.title)

        },
        querybk(){
            this.books=[...this.bookscpy];
        },
        delmul(){
            if(confirm("确实要删除多行吗？")==true)
            {    
                // let checkDom=this.$refs.setall.getElementsByClassName('setbtn');
                // for(var i=0;i<checkDom.length;i++)
                // {
                //    if(checkDom[i].checked==true)
                //       this.books.splice(i,1);
                // }  
                this.books=this.books.filter((item)=>{return this.bookrecord.indexOf(item.title)==-1} );         
             
            }
            else
            {
                return;
            }

        },
        submit()
        {
            
            this.books.forEach(element => {
                if(element.title==this.obj.title)
                {
                    element.author=this.obj.author;
                    element.price=this.obj.price;
                }
                
            });
            this.flag=false;
        }
     }
     

     
     });  

 </script>
</body>

</html>