关于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和容易踩的坑,需要的同学可以收藏一波,如果对你有帮助,可以在评论区扣个“有用”,然后再点个赞,感谢感谢~

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信