vue2.0 更新的 v-for的改变

最新推荐文章于 2024-05-28 23:40:22 发布
最新推荐文章于 2024-05-28 23:40:22 发布
阅读量356 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41033048/article/details/88385130
版权

以vue1.0的版本编写代码的时候，按以前的写法会有警告显示，看起来很不美好。
以前的写法：<li v-for="item in goods" class="menu-item" >
现在的写法：<li v-for="(item,index) in goods" :key="index" class="menu-item" >

叶川飞流
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
10-18
主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧
vue3【列表渲染】v-for 详细介绍（vue中的“循环”）
XSL_HR的博客
10-15 2万+
在本文之前已经有文章简单概要介绍过vue中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“循环”。下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏。
Vue 3中的v-for指令使用详解
最新发布
李长渊的博客
05-28 2184
Vue 3中的v-for指令使用详解
Vue3.0整理
sjshgdhejs的博客
03-09 270
Vue学习笔记 Vue生命周期执行顺序以及时机 // 当前组件层级 <Parent> <Child></Child> </Parent> // 初始化阶段 parent beforeCreate parent created parent beforeMount child beforeCreate child created child beforeMount child mounted parent mounted
Vue3 循环渲染 v-for
xiaowude_boke的博客
03-02 1098
vue3循环v-for
Vue3.0学习笔记-循环v-for
petit_wu的专栏
03-03 1956
循环数字 count in 99 <span v-for="count in 99">{{count}},</span> 循环数组 item in listArray template:` <ul> <li v-for="item in listArray">{{item}}</li> </ul> ` template:` <ul> <li v-fo
vue2.0 可折叠列表 v-for循环展示的实例
10-18
通过以上分析，我们可以看出，Vue 2.0实现的可折叠列表主要利用了`v-for`循环、条件渲染、事件监听和数据响应性等特性。开发者可以通过自定义方法和样式，灵活地调整列表的行为和外观，适应各种应用场景。这个实例是...
权限管理系统 vue2.0 + element-ui.zip
10-12
【权限管理系统 vue2.0 + element-ui.zip】是一个基于Vue.js 2.0框架和Element-UI组件库构建的权限管理系统的源代码压缩包。Vue.js是目前非常流行且广泛使用的前端JavaScript框架，它以其轻量级、高性能和易于学习的...
详解Vue中使用v-for语句抛出错误的解决方案
11-30
在Vue.js中，`v-for`指令用于遍历数组或对象，生成对应的DOM元素。然而，在实际开发过程中，我们可能会遇到使用`v-for`时出现错误的情况，如标题和描述中提到的`TypeError: Cannot read property 'removeChild' of ...
Vue2.0点击切换类名改变样式的方法
10-18
在Vue2.0中实现点击切换类名改变样式的知识点主要包括以下方面： 1. Vue实例化与数据绑定 在使用Vue.js时，我们首先需要创建一个Vue实例，并且要将这个实例与页面上的DOM元素关联起来。在上述文档中，通过以下代码...
vue2.0源码学习资源
10-29
在这个“vue2.0源码学习资源”中，我们将探讨Vue的核心概念，包括AST（抽象语法树）、编译原理、观察者模式以及双向数据绑定。 1. AST对象：在Vue中，模板会被转换为AST（抽象语法树），这是一个结构化的表示形式，...
vue3中的v-for
qq_44482048的博客
01-18 5897
vue3中的v-for
【Vue】v-for更新监测, key作用？
DomCode
12-03 1162
一、v-for更新监测 目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新 数组变更方法, 就会导致v-for更新, 页面更新；数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()。 情况1: 数组翻转 情况2: 数组截取 情况3: 更新值 <template> <div> <ul> <li v-for="(val, index) in arr" :key="index">
初识Vue 3.0 —— v-for: 列表循环数组/对象
QUX轻博客
12-14 2390
<h5>5.列表循环</h5> <p>a.遍历数组： v-for="item in lists" ，数组格式 items: [{ ...
前端VUE3.0,DAY17，列表渲染之v-for
疯子的梦想@的博客
08-07 349
VUE3.0,DAY17列表渲染之基本列表v-for总结 列表渲染之基本列表v-for 1.使用v-for让vue自动进行循环遍历data中写的数据。代码中，data中的persons1写了三个id的数据。将v-for使用在一个小li标签中，在网页中则自动生成了三个小li标签数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi
【vue】使用vue时可以通过 this.$forceUpdate() 强制刷新页面数据（用于v-for循环值刷新中）
liuzhenhe1988的专栏
06-14 2395
在vue中使用v-for绑定数据时，经常会动态刷新数据，有时候会遇到刷新后没有动态自动更新绑定的展示数据，也就是说在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，这时候可以用this.$forceUpdate() 进行强制刷新；......
VUE3v-if、v-for、v-show的理解
qingdouxiaohua的博客
03-24 1186
是一个条件渲染指令，它会根据表达式的真假值来动态地添加或移除元素。如果表达式的值为真，则元素会被添加到 DOM 中；是一个列表渲染指令，它用于遍历数组或对象的属性，并为每个元素或属性生成一个模板的副本。如果元素频繁地显示和隐藏，且对性能要求较高，通常使用。因此，即使元素被隐藏，它仍然会保留在 DOM 中。是三种常用的指令，它们分别用于条件渲染、列表渲染和元素显示隐藏。如果元素不常变化，或者需要在条件不满足时完全移除元素，可以使用。不会从 DOM 中移除元素，而是通过改变元素的 CSS 属性。
vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
热门推荐
日常笔记/总结/系列知识梳理
07-26 4万+
问题描述： 在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值； 解决： 运用 this.$forceUpdate()强制刷新 代码案例 &amp;lt;Select v-model=&quot;carSafeLine.insuranceName&quot; placeholder=&quot;请选择&quot; class=&quot;mulisel option-h&quo
使用VUE2.0做一个简单的分页，过程很详细
06-08
好的，下面是使用 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、付费专栏及课程。

余额充值