本文介绍了在Flask应用中使用Vue时遇到的前端问题，特别是关于蓝图和Vue之间的冲突。通过实例化Vue来处理分页功能，并提供了模板中图片加载、调用方法及数据更新的解决方案。遇到类似问题的开发者可以参考这篇跳坑手册。
因为Flask的前端有其优点，尤其是结合Flask_babel处理国际化支持i18N。就是在document里定义一个 app的元素，用于实例化VUE。不得不说，VUE的强大之处。第一次写VUE分页参考了https://www.cnblogs.com/sebastian-tyd/p/7853109.html的作品
上一页
1
...
{{num}}
...
下一页
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;
},
},
})
特此记录一下。
最初可能会遇到的问题：
VUE模板里图片无法加载：
如何调用方法：
Jump
如何更新数据：一般是执行完ajax之后，更新数据。
... ...
var _this = this;
// 注意要复制一下当前对象。。。
$.ajax({
url: "/xxx",
type: "GET",
data: {"data":data},
dataType: 'json',
success: function (result) {
if(result){
_this.dataset= result.dataset;
}
}
});
LP 小透明的记录就到这里了，希望小伙伴们不要跳坑。。。
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
