如何在html vue js中进行分页？

Question

我怎样才能在html vue js中进行分页。当我点击第一页时，我需要将偏移设置为0，当我点击2页时，我需要将偏移量发送为100，依此类推。我怎样才能发送这样的偏移量。

我的分页html代码是

<div class="col-md-12"> 
                        <div class="pull-right">
                            <div class="pagination">
                                <ul>
                                    <li><a href="#">Prev</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                        </div>                
                    </div>
                   <div class="items-per-page">
                            <label for="items_per_page"><b>Property per page :</b></label>
                            <div class="sel">
                                <select id="items_per_page" name="limit" v-model="limit">
                                    <option value="3">3</option>
                                    <option value="6">6</option>
                                    <option value="9">9</option>
                                    <option selected="selected" value="12">12</option>
                                    <option value="15">15</option>
                                    <option value="30">30</option>
                                    <option value="45">45</option>
                                    <option value="60">60</option>
                                </select>
                            </div><!--/ .sel-->
                        </div><!--/ .items-per-page-->

基于我需要继续添加页面的偏移量。怎么可能。

我的views.py是

@csrf_exempt
def search(request):
    if request.method == 'POST':
        category = request.POST.get('category')
        city = request.POST.get('city')
        name = request.POST.get('name')
        d = {
            'category': category,
            'city': city,
            'name': name,

        }
        return render(request, "search.html", d);
    else:
    # do the thing you want to do in GET method

        return render(request,"search.html",{});

我的urls.py是

url(r'^search',views.search),

我的vue js代码是

<script>
searchContent = new Vue({
        el: "#searchContent",
        data: {
          vector: {}
        }
      });
categories = new Vue({
    el: '#categories',
    data: {
        offset: '',
        limit:'',
         place: '',
        category: '',
        inventory: '',
        name: '',
        city: '',
        district: '',
    },
    methods: {
          prefetch: function() {
            var filter = {};
            if (this.category != '') 
                filter['category'] = this.category;

            if (this.inventory != '')
                filter['inventory'] = this.inventory;

            if (this.name != '')
                filter['name'] = this.name;

            if (this.city != '')
                filter['city'] = this.city;

            if (this.district != '')
                filter['district'] = this.district;

            if (this.place != '')
                filter['place'] = this.place;

            //Here I need to provide offset and limit

                filter['limit'] = this.limit;
                filter['offset'] = this.offset.
            if (this.content !== false)
              this.content.abort()
              this.content = $.ajax({
              'url': '/filter/',
              data: filter,
              dataType: "JSON",
              type: "POST",
              success: function(e) {

                 window.searchContent.vector = e.data;
                console.log(e);
              }
            })
          }
        }

})
</script>

所以基于分页中页面的选择，我怎样才能发送相应的偏移值，请帮我解决一下。

之前我没有做过分页

如果我选择1，我需要将偏移量发送为50，如果是2-100。如果3-150等等，我已经给出了一个重要的信息。

我怎样才能轻松实现