Vue 常用API整理


关于API这东西，前端各个框架都是不同的，且都经常更新，不用死记，所以本篇博客记录一下Vue中业务上常用的API（稍复杂些的API，简单的略）

Vue中的数组操作

* 循环 <ul> // FAQ: key值一般不取index（数组下标值） 取唯一的id值
//（若一个页面有多个数组，index会有多个，key值则失去了唯一性） <li v-for="(item, index) in list" :key=
"item.id">{{item.name}}</li> <ul>
* 改变数组值 list:['a','b','c']; // 此为data中的数组 list[0] = 'aa'; //
此种修改是无效的，UI界面不会重新渲染 这是应该注意的 // 正确的姿势 通过调用 $set(array, index, value) // 传参：1.
要操作的数组 2. 下标值 3. 修改的值 this.$set(this.list, 0, 'aa'); // 或 Vue.$set(this.list,
0, 'aa');
* 对象数组元素交换位置（适用于业务上的，列表交换和上下移动） list:[ { id:1, name: '小明', }, { id:2, name:
'小红', }, { id:3, name: '小绿', }, ] // 上下移动 function changeSort(type, index){ let
tempArray; // 上移 if(type == 'up'){ // 搞个临时数组接收一下 tempArray = this.list[index-1];
// 交换 this.$set(this.list, index-1,this.list[index]); this.$set(this.list, index
, tempArray); }else{ tempArray = this.list[index + 1]; this.$set(this.list,
index+ 1,this.list[index]); this.$set(this.list, index, tempArray); } } //
随机调换也是一样的，传index就可以了 // ...代码略
* 删除数组元素 this.$delete(this.list, index); // index 下标值
Vue中的对象操作
obj: { name: '猪小明', age: 18, class: '三年二班' }
* 修改 this.$set(this.obj, 'name', '王八蛋'); // obj 中的 name 从 “朱小明” 变成了 “王八蛋”
* 删除 this.$delete(this.obj, "age"); // obj中的age没得了
Vue中的 $nextTick

这玩意太长，下次单独写一篇，放个链接（先去恰个羊肉火锅，告辞！）

本篇博客会不定时更新，记录Vue中各种常用的API和容易踩的坑，需要的同学可以收藏一波，如果对你有帮助，可以在评论区扣个“有用”，然后再点个赞，感谢感谢~

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy