自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

wwwwwqj的博客

原创 vue3 骨架屏+上拉加载更多封装

vue3 骨架屏+上拉加载更多封装介绍因业务需求要用到滚动加载，就用到了vant组件库里的List组件，然后突发奇想封装了个骨架屏进去，api和使用方法还有文档都参考了vant的list组件，不过没有参考源码，此组件是我第一次封装，比较贴合自身业务，所以不太符合需求的同学可以直接修改源码使用，感谢vant团队！vant的List组件地址（https://vant-contrib.gitee.io/vant/v3/#/zh-CN/list）提供骨架屏展示、瀑布流滚动加载，用于展示长列表，当列表即将

2021-03-04 15:28:12 1242 2

原创 vue3 解决reactive数组对象属性更新问题

vue3 setup中使用对象数组const state = reactive<DataProps>({ fileList:[] })如果更新数组中的对象属性会发现数据不会更新，比如const newImgFile: ImgFile = { path:result, status: 'selected', file: files[0] } state.fileList.push(newImgFile) newImgFile.path = '123';解决

2021-02-22 18:10:01 23053 6

list_view.zip

vue3 骨架屏+上拉加载更多封装的组件

2021-03-04

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

wwwwwqj 优快云认证博客专家优快云认证企业博客

码龄7年

IP 属地：山东省

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

2: 原创

64万+: 周排名

70万+: 总排名

2万+: 访问

: 等级

32: 积分

1: 粉丝

5: 获赞

8: 评论

6: 收藏

私信

关注

热门文章

分类专栏

vue 2篇
flutter

最新评论

vue3 解决reactive数组对象属性更新问题
_Smile_m: 因为filter返回的数据改变了todos原有的响应式数据，你可以打印试试
vue3 解决reactive数组对象属性更新问题
wwwwwqj: function removeTodo(todo) { // ... todos = todos.filter( t => t != todo ) } 这里有问题，你这样是把响应式对象引用改变了，原来的视图就追踪不到数据更新了，应该用todos.splice删除元素，不能更改最外层的引用
vue3 解决reactive数组对象属性更新问题
DefterYu: 上面这段代码点击删除没有立即响应。官方用的是ref定义数组 .value.filter来过滤数组可以立即更新视图，但我改成reactive定义直接.filter 去无法立即更新视图很奇怪啊不知道为啥
vue3 解决reactive数组对象属性更新问题
DefterYu: <script setup> import { ref, reactive } from 'vue' // 给每个 todo 对象一个唯一的 id let id = 0 const newTodo = ref('') let todos = reactive([ { id: id++, text: 'Learn HTML' }, { id: id++, text: 'Learn JavaScript' }, { id: id++, text: 'Learn Vue' } ]) function addTodo() { // ... todos.push( { id: id++, text: newTodo.value }) newTodo.value = '' } function removeTodo(todo) { // ... todos = todos.filter( t => t != todo ) } </script> <template> <form @submit.prevent="addTodo"> <input v-model="newTodo"> <button>Add Todo</button> </form> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} <button @click="removeTodo(todo)">X</button> </li> </ul> </template>
vue3 解决reactive数组对象属性更新问题
wwwwwqj: 代码贴出来看看

最新文章

提示

确定要删除当前文章？

取消删除