因为Flask的前端有其优点，尤其是结合Flask_babel处理国际化支持i18N。就是在document里定义一个 app的元素，用于实例化VUE。不得不说，VUE的强大之处。第一次写VUE分页参考了https://www.cnblogs.com/sebastian-tyd/p/7853109.html的作品
<div id="app">
<div>
<div class="page" v-show="show">
<div class="pagelist">
<span class="jump"v-show="current_page>1" @click="{current_page--}">上一页</span>
<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
<span class="ellipsis" v-show="efont">...</span>
<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
<span class="ellipsis" v-show="efont&¤t_page<pages-4">...</span>
<span class="jump" @click="{current_page++}">下一页</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
var newlist = new Vue({
el: '#app',
data: {
current_page: 1, //当前页
pages: 50, //总页数
changePage:'',//跳转页
nowIndex:0
},
computed:{
show:function(){
return this.pages && this.pages !=1
},
efont: function() {
if (this.pages <= 7) return false;
return this.current_page > 5
},
indexs: function() {
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages - 4) {
left = Number(this.current_page) - 3;
right = Number(this.current_page) + 3;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage: function(id) {
this.current_page = id;
},
},
})
</script>
特此记录一下。
最初可能会遇到的问题：
VUE模板里图片无法加载：
<img :src="{{img.url}}"/>
如何调用方法：
<button @click="jumpPage(page)">Jump</button>
如何更新数据：一般是执行完ajax之后，更新数据。
... ...
var _this = this;
// 注意要复制一下当前对象。。。
$.ajax({
url: "/xxx",
type: "GET",
data: {"data":data},
dataType: 'json',
success: function (result) {
if(result){
_this.dataset= result.dataset;
}
}
});
LP 小透明的记录就到这里了，希望小伙伴们不要跳坑。。。