我爱我车,怀孕5个月食谱,吴丽嫦
最近看到一个需求:
乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的。
评论表单代码:
<!-- 文档结构区开始 --> <template> <div id="comment" > <userdiv @transferuser="getinput" ></userdiv> <commentdiv :list="list"></commentdiv> <pagediv @transferuser="getpage" :totalcount="totalcount" :currentpage="currentpage"></pagediv> </div> </template> <!-- 文档结构区结束 -->
<!-- js 控制区开始 --> <script> //引入组件 commentinput、commentlist、pagination import userdiv from './commentinput.vue' import pagediv from './pagination.vue' import commentdiv from './commentlist.vue' export default { //声明组件名 name: 'comment', //包含实例可用组件的哈希表 components: { userdiv, pagediv, commentdiv }, //声明组件参数 data() { return { totalcount: 0, currentpage: 1, pagesize: 3, totaldata: [], list: [], } }, methods: { //显示评论列表信息的方法 getinput(msg) { //将评论信息保存到评论数组里 this.totaldata.push({ text: msg }) //计算评论信息总条数长度 this.totalcount = this.totaldata.length //判断评论总数是否大于单页显示条数 if (this.totalcount <= this.pagesize) { // 显示所有评论 this.list = this.totaldata } else { // 截取totaldata中 this.totalcount - this.pagesize 后面的元素进行显示 this.list = this.totaldata.slice(this.totalcount - this.pagesize) } //点击评论按钮,默认跳转显示第一页内容 this.currentpage = 1 //评论列表倒序显示,即最新评论,显示在最上面 this.list.reverse() }, // 计算评论列表每一页的显示内容 getpage(curr, size) { this.currentpage = curr if (this.totalcount <= this.pagesize) { //显示所有评论 this.list = this.totaldata } else { var start = this.totalcount - this.currentpage * this.pagesize if (start < 0) { start = 0 } // 截取totaldata中 [start, start + this.pagesize] 位元素进行显示 this.list = this.totaldata.slice(start, start + this.pagesize) } //评论列表倒序显示,即最新评论,显示在最上面 this.list.reverse() } }, } </script> <!-- js 控制区结束 -->
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论