Vue中使用set方法过程的一个小发现

http://blog.csdn.net/denl0918/article/details/54292262

vue教程中有这样一个注意事项:

第一种具体情况如下:

运行结果:

当利用索引改变数组某一项时,页面不会刷新。解决方法如下:

运行结果:

三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。或者用 vm = JSON.parse(JSON.stringify(vm))

 

在做项目的过程中,有个发现,先上代码:

第一个数组通过利用下标改变第二项,第二个数组使用$set()方法改变第二项,根据上面的代码,我们会知道:第一个数组的第二项改变不会在页面更新,只有第二个数组的更改会在页面更新。然而结果却是:

两个数组的的改变都在页面更新了。。

也就是说,$set()方法调用时,页面会全部更新一遍。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 Vue 2.0 实现简单分页的步骤: 1. 在组件定义数据 在组件的 `data` 定义需要用到的数据,如当前页码、每页显示条数、总条数和数据列表等。 ``` data() { return { currentPage: 1, pageSize: 10, total: 0, list: [] } } ``` 2. 定义方法获取数据 定义一个方法用于获取数据,该方法需要传入当前页码和每页显示条数,然后根据接口返回的数据更新数据列表和总条数。 ``` // 使用 axios 发送请求获取数据 getData(page, size) { axios.get('/api/list', { params: { page, size } }).then(res => { this.list = res.data.list this.total = res.data.total }) } ``` 3. 定义分页组件 定义一个分页组件,包含页码、上一页、下一页、跳转到指定页码等功能。 ``` <template> <div class="pagination"> <span class="page-item" :class="{disabled: currentPage === 1}" @click="prevPage">上一页</span> <span v-for="item in pages" :key="item" :class="{active: item === currentPage}" class="page-item" @click="changePage(item)">{{ item }}</span> <span class="page-item" :class="{disabled: currentPage === totalPage}" @click="nextPage">下一页</span> <div class="page-jump"> 跳转到<input type="text" v-model="jumpPage">页 <button @click="jumpToPage">确定</button> </div> </div> </template> ``` 4. 实现分页组件逻辑 定义计算属性 `pages`,根据当前页码和总条数计算出需要显示的页码数组。 ``` computed: { // 计算需要显示的页码 pages() { const pageArr = [] const totalPage = Math.ceil(this.total / this.pageSize) let start, end if (totalPage <= 7) { start = 1 end = totalPage } else { if (this.currentPage <= 4) { start = 1 end = 7 } else if (this.currentPage >= totalPage - 3) { start = totalPage - 6 end = totalPage } else { start = this.currentPage - 3 end = this.currentPage + 3 } } for (let i = start; i <= end; i++) { pageArr.push(i) } return pageArr } }, ``` 定义方法 `changePage`,用于改变当前页码,并重新获取数据。 ``` methods: { // 改变页码 changePage(page) { this.currentPage = page this.getData(this.currentPage, this.pageSize) }, // 上一页 prevPage() { if (this.currentPage > 1) { this.currentPage-- this.getData(this.currentPage, this.pageSize) } }, // 下一页 nextPage() { if (this.currentPage < this.totalPage) { this.currentPage++ this.getData(this.currentPage, this.pageSize) } }, // 跳转到指定页码 jumpToPage() { const jumpPage = parseInt(this.jumpPage) if (jumpPage >= 1 && jumpPage <= this.totalPage) { this.currentPage = jumpPage this.getData(this.currentPage, this.pageSize) } } } ``` 5. 使用分页组件 在组件的模板引入分页组件,并传入需要用到的数据和方法即可。 ``` <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.title }}</li> </ul> <pagination :current-page="currentPage" :page-size="pageSize" :total="total" @change-page="changePage" /> </div> </template> ``` 以上就是使用 Vue 2.0 实现简单分页的步骤,具体的实现可以根据自己的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值