手把手教你做一个VUE纯单页面的，静态的增删改查，非常详细

你的名字 2021-09-13 16:36 1251阅读 0赞

## 手把手教你做一个VUE纯单页面的，静态的增删改查 ##

## **1.工具** ##

**idea  
vue需要的三个js文件**  
vue.js vue最基础的js文件  
qs.js后台传参时需要进行转换（此处单页面，不进行后台传参，所以不需要）  
axios.js 发送路径  
![在这里插入图片描述][2020061410392666.png]  
步骤1：  
首先建一个vuetest.html文件，导入需要的js文件  
如图：我的项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]  
导入需要的js文件

## 查询 ##

body中

<div  id="app">
      <table border="1">
    
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
    
            
             <tr  v-for="(item,index) in list" >
                <td>{
       {index}}</td>
                <td>{
       {item.name}}</td>
                <td>{
       {item.age}}</td>
                 <td>
                     <input type="button" v-on:click="update(index,item)" value="修改">
                     <input type="button" v-on:click="del(index)" value="删除">
                 </td>
             </tr>
        </table>
    
        </div>

script中

new Vue({
     //所有的vue的操作，都必须放到这个id="app" 的div中，否则，vue用不了
            el:"#app",
            data:{
            //存放要查询的数据集合（动态的这里直接写一个空集合，就可以使用了）
                list:[
                    {name:"张三",age:22},
                    {name:"李四",age:11},
                    {name:"王五",age:26},
                    {name:"aaa",age:33}
                ],
    
            },
        })

查询完成了

![在这里插入图片描述][20200614105223283.png]

## 新增 ##

姓名： <input type="text" v-model="name" id="name"/>
       年龄： <input type="text"  v-model="age" id="age"/>
        <input type="button" v-on:click="add()" value="增加">

new Vue({
            el:"#app",
            data:{
             //与v-model中的必须保持一致
                name:"",
                age:"",
    
                list:[
                    {name:"张三",age:22},
                    {name:"李四",age:11},
                    {name:"王五",age:26},
                    {name:"aaa",age:33}
                ],
    
            },
    
            methods:{
    
                add:function(){
                    //直接通过this.name就可以获取到文本框中name的值
                  //  alert(this.name);
                  //  alert(this.age);
    
                    //定义一个键值对的json，通过list的push方法增加到list中数据
                    var user = {name:this.name,age:this.age}
                    this.list.push(user);
                },
            }
        })

增加结束  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 1]

## 修改 ##

姓名： <input type="text" v-model="name" id="name"/>
    年龄： <input type="text"  v-model="age" id="age"/>
    
      <input type="button" v-on:click="updateUser()" value="修改">
    
     <table border="1">
    
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
    
            
             <tr  v-for="(item,index) in list" >
                <td>{
       {index}}</td>
                <td>{
       {item.name}}</td>
                <td>{
       {item.age}}</td>
                 <td>
                     <input type="button" v-on:click="update(index,item)" value="修改">
                     <input type="button" v-on:click="del(index)" value="删除">
                 </td>
             </tr>
        </table>

new Vue({
        el:"#app",
        data:{
            nameJiLian:"",
            name:"",
            age:"",
            //存放当前行的唯一标识
            indexVal:"",
    
            list:[
                {name:"张三",age:22},
                {name:"李四",age:11},
                {name:"王五",age:26},
                {name:"aaa",age:33}
            ],
    
        },
    
    
        methods:{
    
    		//回显
           toUpdate:function(index){
            
              //  alert(index);
             //   alert(item.name);
             
             //通过this可直接获取到文本框中name个age值，并进行回显，index是当前行的唯一标识
                this.name = this.list[index].name;
                this.age =  this.list[index].age;
                this.indexVal = index;
                //alert( this.indexVal);
            },
            
         //修改
            updateUser:function(index) {
            //获取到所有对象，以键值进行存储
                var user = {name:this.name,age:this.age};
    			//获取当前唯一标识
                var indexVal = this.indexVal;
    
             //   alert(indexVal);
    			//给list集合下标为indexVal的所对应的赋值
                this.list[this.indexVal].name = this.name;
                this.list[this.indexVal].age = this.age;
    
    		//修改结束，将所有文本框置空
                this.name="";
                this.age="";
                this.indexVal="";
                
            }
    
        }
    
    })

回显  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 2]  
修改后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 3]

## 删除 ##

div中

<tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    
        
         <tr  v-for="(item,index) in list" >
            <td>{
       {index}}</td>
            <td>{
       {item.name}}</td>
            <td>{
       {item.age}}</td>
             <td>
                 <input type="button" v-on:click="update(index,item)" value="修改">
                 <input type="button" v-on:click="del(index)" value="删除">
             </td>
         </tr>
    </table>

script

methods:{
     //需要传一个参数过来。也就是当前数据的唯一标识
      		del:function(index){
    
                   // alert("删除");
                   //用list的splice方法，第一个参数：从那个开始删除，第二个参数：删除几条数据
                    this.list.splice(index,1);
                },
    
    }

删除结束  
![在这里插入图片描述][20200614111653598.png]  
![在这里插入图片描述][2020061411170086.png]

[2020061410392666.png]: /images/20210913/d4a74216399747cbb5fd82fcef766522.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/f7bec0c9ac884d3ab6f7f2533e38279d.png
[20200614105223283.png]: /images/20210913/08987e8f018a4311b721b26bcc235a71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 1]: /images/20210913/5b1f6a15eac447f597a8748c36f4392d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 2]: /images/20210913/ab59721dfb78445da0c9cdc7310bb87a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70 3]: /images/20210913/e2b286c616fe40cea2d253f361270421.png
[20200614111653598.png]: /images/20210913/878127615aa74645afd7840a731697fc.png
[2020061411170086.png]: /images/20210913/dbb6e95a52ab4e558e828c3be41d9797.png