精华内容
下载资源
问答
  • Vue 使用slice 进行分段渲染

    千次阅读 2020-04-01 10:46:37
    目前遇到一些特别的需求,某个组件在一个div要渲染4个,循环渲染几个这样的div,但是给出来的数据是一组的,数量随机,所以只能用slice分割数组去渲染 在creaded里面设置好改数组的长度,保存下来,记得要用math....

    目前遇到一些特别的需求,某个组件在一个div要渲染4个,循环渲染几个这样的div,但是给出来的数据是一组的,数量随机,所以只能用slice分割数组去渲染

    在这里插入图片描述
    在creaded里面设置好改数组的长度,保存下来,记得要用math.ceil除法,意思是进1,列如5/4 = 2
    在这里插入图片描述
    这渲染的时候,数据绑定给子组件的时候就使用slice分组数据放入,
    渲染的次数是根据该数组的长度。

    展开全文
  • Vue数组操作不刷新视图问题的解决

    Vue数组操作不刷新视图问题的解决

    参考文章:

    (1)Vue数组操作不刷新视图问题的解决

    (2)https://www.cnblogs.com/oliverreal/p/9212545.html


    备忘一下。


    展开全文
  • 今天学习操作数组的其他方法:concat()、slice()和splice()。 concat()方法 concat()方法可以简单的将其理解为合并数组。基于当前数组中的所有项创建一个新数组。简单的说,concat()先给当前数组创建一个副本,...

    JavaScript为操作已经包含在数组中的项提供了很多方法。比如push()pop()shift()unshift()实现数组的增删操作sort()reverse()对数组项进行排序操作。今天学习操作数组的其他方法:concat()slice()splice()

    concat()方法

    concat()方法可以简单的将其理解为合并数组。基于当前数组中的所有项创建一个新数组。简单的说,concat()先给当前数组创建一个副本,然后将接收到的参数添加到这个副本(数组)的末尾,最后返回一个新的数组。来看个简单的示例:

     
    1. var arr = [`大漠`,'30','W3cplus'];

    2. console.log(arr); // ["大漠", "30", "W3cplus"]

    3. var arr2 = arr.concat('Blog','2014');

    4. console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

    上面代码演示的concat()方法传递的值不是数组,这些值就会简单添加到结果数组(arr2)的末尾。

    除此之外,concat()传递的值还有其他的使用方法:同时传递一个或多个数组,如下所示:

     
    1. var arr = ["大漠","30"];

    2. console.log(arr); // ["大漠", "30"]

    3. var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]);

    4. console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]

    另外,concat()还可以传递空值(也就是说没有传递参数),此时它只是复制当前数组,并且返回一个副本。如下所示:

     
    1. var arr = [1,2];

    2. console.log(arr); // [1, 2]

    3. var arr2 = arr.concat();

    4. console.log(arr2); // [1, 2]

    从上面几个示例,不难看出:concat()方法是在数组的副本上进行操作并返回新构建的数组,所以并不会影响到原来的数组。

    concat() vs. push()

    前面说过push()方法可以也可以给数组传参数,同样是在数组的末尾添加一个或多个值(数组)。那么与concat()有什么不同之处呢?别的先不多说,先来看一个示例:

     
    1. // push()方法

    2. var arr = ['a','b'];

    3. console.log(arr); // ["a", "b"]

    4. arr.push('c','d');

    5. console.log(arr); // ["a", "b", "c", "d"]

    6.  
    7. // concat()方法

    8. var arr = ['a','b'];

    9. console.log(arr); // ["a", "b"]

    10. arr.concat('c','d');

    11. console.log(arr); // ["a", "b"]

    12. var arr2 = arr.concat('c','d');

    13. console.log(arr2); // ["a", "b", "c", "d"]

    14.  

    Chrome输出的结果告诉我们:push()concat()方法都可以将传的参数添加到数组的后面,只不过push()是在原数组上操作(改变的是原数组),concat()不会改变原数组,创建原数组的副本,并且把传的参数添加到新数组后面。

    如果传的是数组又将是一个什么情形呢?还是看实例吧。

     
    1. // push()方法

    2. var arr = ['a','b'];

    3. console.log(arr); // ["a", "b"]

    4. arr.push(['c','d'],[1,2,3]);

    5. console.log(arr); // ["a", "b", Array[2], Array[3]]

    6.  
    7. // concat()

    8. var arr = ['a','b'];

    9. console.log(arr); // ["a", "b"]

    10. var arr2 = arr.concat(['c','d'],[1,2,3]);

    11. console.log(arr2); // ["a", "b", "c", "d", 1, 2, 3]

    12.  

    Chrome输出的结果(push() vs. concat()):

    push() vs. concat()

    push()传递的参数是数组时,将整个数组传给原数组末尾,如示例中得到的结果["a", "b", Array[2], Array[3]],而concat()传递的参数是数组时,将参数中数组的每一个数组项添加到原数组的末尾,如示例中得到的结果["a", "b", "c", "d", 1, 2, 3]

    slice()方法

    concat()方法可以在原数组基础上创建一个副本数组,其实slice()方法它也能基于当前数组创建一个新数组,而且对原数组也并不会有任何影响。

    slice()接受一个或两个参数,即要返回项的起始和结束位置。当只给slice()传递一个参数时,该方法返回从该参数指定位置开始到当前数组末尾的所有项。如下面示例:

     
    1. // 测试数组函数,将输出数组的length和第个key:value

    2. var test = function(array) {

    3. console.log('length:'+ array.length);

    4. array.forEach(function(element, index, array) {

    5. console.log(index + ':' + element);

    6. });

    7. };

    8.  
    9. var arr = [0,1,2,3,4,5,6];

    10. test(arr);

    11. var arr2 = arr.slice(3);

    12. test(arr);

    13. test(arr2);

    14.  

    Chrome输出的结果如下:

    slice()方法

    假设将数组arr的每个数组项存放在一个小格子中,并且按数组的索引号从左向右存放。slice()方法执行之后,将会按传递的参数之前的值从格子中移除,如下图所示:

    slice()方法

    slice()还可以传两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项,如:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.slice(2,5);

    4. test(arr);

    5. test(arr2);

    Chrome输出的结果如下:

    slice()方法

    同样使用小格子存放的方式来演示整个处理过程:

    slice()方法

    slice()传递的参数还可以是负值。当参数中有一个负值时,则用数组长度加上该数来确定相应的位置。比如传递的值是-3,数组的length6,此时slice(-3)对应的就是slice(3)。或者可以从数组的末尾开始计算起,最末尾的是-1。来看看示例:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.slice(-3);

    4. test(arr);

    5. test(arr2);

    Chrome输出的结果如下:

    slice()方法

    同样使用小格子存放的方式来演示整个处理过程:

    slice()方法

    当然第二个参数也可以是负数,而且还可以正数和负数混合使用。但有一点需要特别注意:slice()传递的两个参数时,第一个参数和第二个参数位置相同或者第一个参数在第二个参数之后时,得到的新数组是一个空值(负值也是类似,但负值与数值长度之和再作对比)。简言之,结束位置小于或等于开始位置,将返回一个空数组。如下面的示例:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.slice(-3,4);

    4. test(arr);

    5. test(arr2);

    slice()方法

    Chrome输出的结果如下:

    slice()方法

    slice()方法和concat()方法类似,会在原数组上构建一个新数组,并不会影响原数组。

    splice()方法

    splice()方法在处理数组的各方法中恐怕是最强大的了,它有很多种用法:

    • 删除: 可以删除任意数量的数组项
    • 插入: 可以向指定位置插入任意数量的数组项
    • 替换: 可以向指定位置插入任意数量的数组项,且同时删除任意数量的数组项

    删除

    splice()方法中指定两个参数,第一个参数是指定开始删除数组项位置,第二个数是指删除数组项的个数。如下面这个示例:

     
    1. var arr = [0,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.splice(2,3);

    4. test(arr);

    5. test(arr2);

    Chrome输出的结果如下:

    splice()方法

    从示例中不难看出,splice()方法做删除动作之后,将会影响原数组(比如示例中的arr),并且将原数组中删除掉的数组项重构成一个新数组(比如示例中新得到的数组arr2)。

    插入

    splice()方法指定三个参数,第一个参数为插入的起始位置,第二个参数为0(要删除的数组项数量,因为删除数量是为0,所以不做删除),第三个参数是要插入的数组项。如果要插入多个项,可以再传入第四、第五、以至任意多个项。如下面的示例:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.splice(2,0,'a','b','c','d');

    4. test(arr);

    5. test(arr2);

    6.  

    Chrome输出的结果如下:

    splice()方法

    上例从第二个位置开始插入字符串abcd字符串。从而原数组增加新的四个数组项,数组arrlength就变成了11;由于删除数量是0,所以返回给新数组arr2是空值(也就是一个空数组)。

    替换

    splice()方法做替换其实和做插入非常类似,只是将第二参数设置为大于0(删除数的数量)。如下例所示:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.splice(2,4,'a','b','c','d');

    4. test(arr);

    5. test(arr2);

    6.  

    Chrome输出的结果如下:

    splice()方法

    结果告诉我们,在原数组arr上第二个位置开始删除了2345个数组项,并且用abcd这几个值替换到删除掉的几个数组项的位置。同时把删除掉的几个数组项重新构成了新数组arr2

    splice()方法始终会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。

    splice()方法和slice()方法类似,起始位置可以是负值,当起始位置为负值时,则用数组长度length加上该数来确定相应的位置。如下所示:

     
    1. var arr = [0,1,2,3,4,5,6];

    2. test(arr);

    3. var arr2 = arr.splice(-2,4,'a','b','c','d');

    4. test(arr);

    5. test(arr2);

    6.  

    Chrome输出的结果如下:

    splice()方法

    总结

    文章介绍了数组的三个操作方法concat()slice()splice()concat()slice()方法都不会影响原数组,会在原数组上构建出一个新数组。其中concat()方法在原数组末尾添加所传的数组项(简单点看有类似于push()方法),构建一个新数组;slice()方法可以从指定的位置开始删除指定的数组项,并且将删除的数组项构建成一个新数组。splice()方法就更强大了,可以对一个数组做删除、插入和替换。而且splice()方法还会影响原数组,并且将返回的值构建出一个新数组。

    初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。

    大漠

    常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

    如需转载,烦请注明出处:http://www.w3cplus.com/javascript/array-part-5.html

    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: https://www.w3cplus.com/javascript/array-part-5.html © w3cplus.com

    展开全文
  • vue的data以及js的slice

    千次阅读 2018-12-08 21:49:22
    <template> <div> <h2>devicebase 页面&...添加1 slice用法</button><br> <span v-for="item in list&qu
    
    
    <template>
      <div>
        <h2>devicebase 页面</h2>
        <button @click="addSlice">添加1 slice用法</button><br>
        <span v-for="item in list" :key="item.id">{{item}}</span>
        <br>
        <button @click="test">test</button>
        <br>
        <button @click="addSet">添加2 this.$set用法</button><br>
        <span v-for="item in listSet" :key="item.id">{{item}}</span>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          list: [{
            a: '1'
          }, {
            b: '2'
          }],
          listSet: [{
            a1: '1'
          }, {
            b1: '2'
          }]
        }
      },
      methods: {
        addSlice () {
          console.log('触发:add事件')
          console.log(this.list[0])
          console.log(this.list[1])
          // let group = []
          // let group = this.list
          let group = this.list.slice(0) // slice(0)的意思是把vue中data下list特殊格式(属于vue的数据格式)给转换为js正常的数据格式
          let obj = { c: '3' }
          group[2] = obj
          this.list[2] = obj // 数组不可以直接添加对象,必须新建一个数组   this is an error understand
          console.log(this.list[2])
          this.list = group
        },
        test () {
          console.log('触发:test事件')
          let list = [{
                a: '1'
              }, {
                b: '2'
              }]
          let obj = { c: '3' }
          list[2] = obj // list数组写在js中是可以直接list[i]添加对象的,data中list: 是不可以的,受vue中data的影响,可以this.$set,也可以this.list=group准确的说是data中的数据格式是vue专属的,和js中数组格式不一样.
          console.log(list)
        },
        addSet () {
          console.log('触发:addSet事件')
          let group = {}
          group.c1 = '3' 
          this.$set(this.listSet, this.listSet.length, group)
          this.$set(this.list, this.list.length, group)
        }
      }
    }
    </script>

     

     

    Q:在vue中不能直接对data定义的list数组添加元素,解决方法有两种?

    1.用Vue专门针对此bug设定的方法,this.$set 或者是 Vue.set(需当前页面impprt Vue from 'vue')

    2.在script中先手动将list转化为js数组数据格式,this.list.clice(0),之后用js的方法即可

     

    附注:slice(0)的深入理解

    深拷贝和slice(0)有什么区别

    Q:var array = listenerArray.slice(0); 和深拷贝有什么区别呢?还有Object.assign() 请做一个区分吧

    深拷贝:拷贝地址和拷贝原对象的属性树,这样拷贝和原对象就是完全独立的了,所以更改'副本'不能更改原对象,这涉及到引用类型和基本类型的概念

    浅拷贝:类似于引用类型,只拷贝地址,可以通过"副本"来修改原对象

     

    .js的传参是按值传递。但是对于引用类型,传递的值是原对象在内存中的地址,所以拷贝仅仅是获取了原对象的引用,对拷贝进行修改,原对象也会被修改,要想避免这种情况出现,就不能仅仅拷贝地址,而是要将原对象的属性树遍历复制到拷贝上,这样拷贝和原对象就是完全独立的了,这就是要达到深拷贝的层次,之前就叫浅拷贝的层次

    如果所有值都是非引用类型,那么深浅拷贝没有差别

    slice可看作浅拷贝,因为如果listenerArray有引用类型的元素的话,slice仅仅是复制了元素的地址,而深拷贝是复制了整个元素

    ar fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

    var citrus = fruits.slice(1,3);

    修改citrus数组里的值,并不会改变fruits,这不就是深克隆吗?

    对于元素全部为基础类型的数组,slice等价于深克隆。对于含有引用类型元素的数组则不然

    展开全文
  • 1、slice(start,end)===>数组、字符串 可以截取数组和字符串, 左闭右开 不会影响原数组 截取字符串 <script> var s = 'hello' //slice()截取字符串 var t = s.slice(0, 3) console.log(t); </...
  • vue经典面试题

    千次阅读 2019-10-19 21:32:11
    Vue面试中,经常会被问到的面试题/Vue知识点整理 726 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,...
  • vue面试题

    千次阅读 多人点赞 2019-08-12 17:02:53
    vue面试题 1.Vue和react的相同与不同 相同点: 都支持服务器端渲染 都有virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,react native...
  • 在设计过程中进行切割和切片无疑是耗时的工作。 此外,当您必须以不同比例切割和切片数百个图层时,它变得... Cut&Slice Me是Photoshop的扩展程序,用于简化剪切和切片设计的过程 。 然后,您可以为iPhone,Andr...
  • vue
  • Vue 页面绑值后截取字符串 一、substring() substring()方法返回一个索引和另一个索引之间的字符串 以下是一些示例代码: var str = 'abcdefghij'; console.log('(1, 2): ' + str.substring(1, 2)); // '(1, 2): b' ...
  • 在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到了数据。 因为加载顺序(生命周期)的问题导致先执行的时候为空,做个空数据就好了(typeIdPro....
  • vue进行简单分页

    2020-05-23 12:15:30
    学习框架的目的是让我们开发更为便捷,相对于用原生或是jQuery来写分页,vue更为简单快捷。之前写过真分页(后端写好分页)的文章,现在来写假分页(前端自己写分页)的文章。废话不多说,直接上代码。 html代码: &...
  • [Vue warn]: Error in render: "TypeError: Cannot read property ‘slice’ of undefined&q… 在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到...
  • vue实现分页功能

    2020-08-20 09:13:56
    vue实现简单的前端分页功能
  • [Vue warn]: Error in render: "TypeError: item.slice is not a function" 2. 原代码写法如下,紫框中的代码可以正常运行,但红框中的代码报错 3. 原因:slice 方法是作用于数组的方法。 bodyInfoList 是一...
  • vue遍历渲染数组

    2021-07-24 15:01:32
    <div v-for="item in userAllInfo.adevarUserSkills" :key="item.id"> {{ item }} </div> v-for = " 单个数据 in 数组 " :key=“单个数据.主键”(主键唯一) 不是对象无需主键
  • VUE PDF上传预览下载(vue-pdf)

    千次阅读 2020-12-15 11:17:42
    vue pdf 实现上传,预览(利用vue-pdf组件支持翻页),下载功能 后台用MultipartFile实现文件上传,文件读写操作IO流 上传 <el-form ref="addForm" :model="addForm" label-width="130px" label-position="left"&...
  • Vue filter详解

    2019-12-09 19:24:16
    Vue filter源码详解 1.解析表达式 以reportDate | DFormat('YYYY-MM-DD') | SDefault为例。 parseFilters 解析函数位于node_modules/vue/src/compiler/parser/filter-parser.js。主要作用是将表达式转换为可立即执行...
  • 深入浅出学 Vue 开发

    万次阅读 多人点赞 2018-08-14 00:42:55
    前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进、架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular、React、Vue 等基于 MVVM 思想的具体实现...
  • Vue的options选项

    2020-06-03 18:19:17
    Vue的options选项 我们在创建Vue实例的时候,传入了一个对象 目前掌握这些选项: el: 类型:string | HTMLElement 作用:决定之后Vue实例会管理哪一个DOM data: 类型:Object | Function 作用:Vue实例对应的数据...
  • vue整理--利用hash过滤数据

    千次阅读 2018-09-02 13:33:18
    var hash = window.location.hash.slice(1); vm.visibility = hash; } watchHashChange(); window.addEventListener("hashchange",watchHashChange); 然后定义计算属性 最后界面上做如下改动
  • MVX模式简介,Vue框架简介,Vue.js的安装与使用。 Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染,条件渲染 Vue事件与表单: 事件处理,事件对象,事件委派,表单处理 MVX...
  • Vue-Router原理剖析之hash模式(一)

    千次阅读 2020-03-25 01:02:15
    从添加router插件开始,在执行了vue add router命令后,项目目录中会增加一个router目录并在main.js中导入router选项。 先从router目录下的index.js开始: import Vue from 'vue' import VueRouter from 'vue-router...
  • vue v-for截取前几位数组的方法

    千次阅读 2021-02-05 17:40:26
    vue v-for截取前几位数组的方法有两种,但是本人推荐使用第一种 方法一:直接加slice(0, 第几个数组),优先推荐使用 方法二: 直接v-if(本人不推荐这种,会报错,原因很简单:v-if和v-for不能同时使用,可以看官网...
  • Vue+Element 实现管理页面菜单栏, 点击菜单时 router 改变 hash 访问不同子组件。 但是改变 hash 时菜单栏展开状态和 highlight 并不会同步, 需要手动实现。 Try Try See 第一反应是通过 onhashchange 监听 hash ...
  • 2020 vue 美团全栈项目(完结)

    千次阅读 2020-04-18 19:55:16
    Vue全家桶+SSR+Koa2 全栈开发仿美团网 ☀☀☀ 项目地址: https://github.com/Chocolate1999/Vue-family-bucket-SSR-Koa2-full-stack-development-from-Meituan 学习地址:传送门 项目介绍 融汇 前端+服务端 全栈...
  • Vue数据代理检测(源码)

    千次阅读 2020-02-13 20:42:57
    阅读源码通常是枯燥无味的,类似 Vue 这种框架级的,代码量更是巨大;且各个实现之间关联性很大,跟踪源码非常跳跃,看完后总是稀里糊涂。今天,从一个常见的错误说起,与使用场景相结合,带着目的去查看源码。 从一...
  • vue 截取字符串

    千次阅读 2020-06-26 12:23:47
    str = str.slice(0);//返回整个字符串 abcdef str = str.substring(0);//返回整个字符串 abcdef str = str.substr(0);//返回整个字符串 abcdef // 使用一个参数 str = str.slice(2);//截取第二个之后所有的字符 cdef...
  • if (slice && slice.byteLength == sliceSize) { var view = new Uint8Array(slice); var arr = []; view.forEach(function(v) { arr.push(v.toString(16)); }); view = null; var idx = arr.join(' ').indexOf...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,833
精华内容 7,933
关键字:

slicevue

vue 订阅