用vue实现列表分页和按钮操作

为中华之崛起而读书

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.min.js"></script>
        <script src="js/axios.min.js"></script>
    </head>
    
    <body>
        <div id="t">
            <table>
                          <tr>
                              <td>id</td>
                              <td>name</td>
                               <td>操作</td>
                              
                          </tr>
                          <tr v-for="k in list">
                               <td>{{k.uid}}</td>
                               <td>{{k.uname}}</td>
                               
                             
                             <td>{{k.status}}</td>
                            
                               <td> <input type="button" @click="a()" v-if="k.status==0"  value="保存"/>
                                  <input type="button" v-on:click="b()" v-if="k.status==1"  value="舍弃"/>
                             </td>
                                            
                          </tr>
                          
                        
                          
                          
            </table>
          <span v-if="this.current>1">
               <input type="button" v-on:click="fnone()" v-if="true"  value="首页"/> 
              
          </span>
          <span v-if="this.current-1>=1">
               <input type="button" v-on:click="fnprev()" v-if="true"  value="上一页"/>        
                        
          </span>
          <span v-if="this.current+1<=total">
                 
                   <input type="button" v-on:click="fnnext()" v-if="true"  value="下一页"/>       
          </span>
          <span v-if="this.current!=total">
                 
                    <input type="button" v-on:click="fnlast()" v-if="true"  value="尾页"/>       
          </span>
                 
                 
                 
                
                  
                  
                  
                  
        </div>
        
    </body>
    <script>
        var nv=new Vue({
            el:"#t",
            data:{
               
                list:[],
                current:1,
                total:1
                
            },
            
            
            methods:{
                fnnext:function(){
                    if(this.current+1<=this.total){
                        this.current=this.current+1;
                        this.fnboss();
                    }
                   
                },
                fnprev:function(){
                    
                    if(this.current-1>=1){
                        this.current=this.current-1;
                        this.fnboss();
                    }
                    
                },
                fnone:function(){
                    this.current=1;
                    this.fnboss();
                
                },
                fnlast:function(){
                    this.current=this.total;
                    this.fnboss();
                    
                },
            
                fnboss:function(){
                    axios.get(`http://localhost:8080/list/${this.current}`).then(obj=>{
                        console.log(obj);
                        this.list=obj.data.data.content;
                        this.total=obj.data.data.totalPages;
                        
                        
                    })
                    
                }
                
            },
            created:function(){
                this.fnboss();
            }
            
            
            
        })
        
    </script>
</html>

猜你喜欢

转载自www.cnblogs.com/zwyzwy/p/12028517.html