发表于： 2020-07-17 22:17:49
1 1979
今日完成:
遇到问题：
编辑页面没显示错误,但浏览器显示错误
数组长度有误,页面显示正确
totalpage: function (){
if (this.total == 0) {//为0时显示1页
return 1;
}
return Math.ceil(this.total / this.size)//上舍入,取整
}
原因:添加在计算属性前的v-for
html页面从上往下编译,到html中添加的v-for计算属性时,跳到js下找这个函数运转,
因为初始设置size:null所以浏览器显示数组错误
继续向下编译,当从服务器传入的数据赋值给size后,到函数这有运行一次,所以页面显示正确
所以看到打印的数据,这个属性请求了两次,第一次值size为null浏览器报错原因,第二次已经赋值,所以浏览器页面正常显示
解决:给初始size设置初始值数字
//善用console.log()查看结果写在输出下方,查看输入的函数,写在return上方
//less语法嵌套属性,中间不能隔着一层div嵌套,样式传递不进去
v-for4种应用方式
1.遍历(循环)普通数组
2.遍历(循环)对象数组
3.遍历(循环)对象
4.遍历数字(迭代数字)
//使用v-for迭代数字,item值从1开始
5.在vue2.20版本后,在组件中使用v-for,key属性是必须的
1.v-for循环的时候, key属性只能使用:number获取string
2.key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值
总结:
1.in后面可以放普通数组,对象数组,对象,还可以放数字
2.如果有需要,注意括号中代指键值,键名,索引值的名字所在的位置,不可改变
它们的名字是自定义的(item,i,key都可以去其他名字,与插值语法中写入相对应即可)
3.遍历要添加key,且key的值只能是数字,使每一项都具有唯一性
想要；页码每次只显示5页,不能直接遍历总页数
前面要做判断,返回数组
逻辑:
判断总页数是否小于5页
是,直接输出结果
否,再做判断
page+4是否小于总页数//显示当前页,和之后4页
是
数组page++
否
数组(总页数tot-4)++
返回列表
评论