Vue 常用API整理

偏执的太偏执、 2022-12-29 02:17 258阅读 0赞

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

Vue中的数组操作

  • 循环

      1. // FAQ: key值一般不取index（数组下标值） 取唯一的id值
      2. //（若一个页面有多个数组，index会有多个，key值则失去了唯一性）
      3. <li v-for="(item, index) in list" :key="item.id">{ { item.name}}</li>

      • 改变数组值

        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:[

        1. {     
        2.     id:1,
        3.     name: '小明',
        4. },
        5. {     
        6.     id:2,
        7.     name: '小红',
        8. },
        9. {     
        10.     id:3,
        11.     name: '小绿',
        12. },

        ]
        // 上下移动
        function changeSort(type, index){ 

        1. let tempArray;
        2. // 上移
        3. if(type  == 'up'){ 
        4.       // 搞个临时数组接收一下
        5.       tempArray =  this.list[index-1];
        6.       // 交换
        7.       this.$set(this.list, index-1,this.list[index]);
        8.       this.$set(this.list, index, tempArray);
        9. }else{ 
        10.      tempArray =  this.list[index + 1];
        11.      this.$set(this.list, index + 1,this.list[index]);
        12.      this.$set(this.list, index, tempArray);
        13. }

        }
        // 随机调换也是一样的，传index就可以了
        // …代码略

      • 删除数组元素

        this.$delete(this.list, index); // index 下标值

      Vue中的对象操作

      1. obj: { 
      2.     name: '猪小明',
      3.     age: 18,
      4.     class: '三年二班'
      5. }

      • 修改

        this.$set(this.obj, ‘name’, ‘王八蛋’); // obj 中的 name 从 “朱小明” 变成了 “王八蛋”

      • 删除

        this.$delete(this.obj, “age”); // obj中的age没得了

      Vue中的 $nextTick

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

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

发表评论

表情：
评论列表 （有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

    相关 常用API

    API 什么是API? API：应用程序接口 简单来说：就是 Java已经帮我们写好的一些方法，我们直接拿过来用就可以了。 Math M

    绝地灬酷狼绝地灬酷狼/ 0 赞/ 166 阅读

    相关 Vue 常用API整理

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

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 259 阅读

    相关 vue-router 常用api详解

    `<router-link>` `<router-link>` 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接

    怼烎@怼烎@/ 0 赞/ 554 阅读