精华内容
下载资源
问答
  • 操作元素的 class 列表和内联...因此,将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组vue官方文档对于class和style绑定有两种方法,对象语法和...
    063fb7a72650dfd4dd957fbac3e99013.png

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

    vue官方文档对于class和style绑定有两种方法,对象语法和数组语法。

    1.绑定 HTML Class对象绑定

    我们用传给v-bind:class 一个对象,动态切换class 是否存在

    isActive 这个变量动态判断active是否显示到html

    vue对象里面

    data: {

    isActive:true,//判断是否显示active这个class

    }

    页面渲染为:

    当然我们也可以对象中传入更多属性来动态切换多个 class,此外,v-bind:class 指令也可以与普通的 class 属性共存。

    动态切换多个 class

    vue对象里面

    data: {

    isActive:true,

    hasError:false

    }

    页面渲染为:

    动态切换多个 class

    对于上面v-bind:class 指令我们也可以传一个对象

    动态切换多个 class

    data: {

    classObject: {

    active: true,

    'text-danger': false

    }

    }

    页面渲染为:

    动态切换多个 class

    对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值

    data: {

    isActive: true,

    error: null

    },

    computed: {

    classObject: function () {

    return {

    active: this.isActive && !this.error,

    'text-danger': this.error && this.error.type === 'fatal'

    }

    }

    }

    2.绑定 HTML Class数组语法

    除了对象语法绑定class,我们还有一种方法是数组语法,我们可以把一个数组传给 v-bind:class。

    data: {

    activeClass: 'active',

    errorClass: 'text-danger'

    }

    页面渲染为

    我们也可以通过三元表达式来进行判断切换class:

    对于class绑定当有多个条件 class 时这样写有些繁琐,在数组语法中也可以使用对象语法。

    展开全文
  • 1.javascript的indexOf()方法var arr_data = [1,2,3];arr_data.indexOf(1);... //如果存在返回值的下标,不存在返回-13.arr.find()数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一...

    1.javascript的indexOf()方法

    var arr_data = [1,2,3];

    arr_data.indexOf(1); //如果存在返回值的下标,不存在返回-1

    2.jquery的$.inArray()方法

    $.inArray(1, arr_data); //如果存在返回值的下标,不存在返回-1

    3.arr.find()

    数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有的数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。

    注意:find()对于空数组,函数是不会执行的。find()并没有改变数组的原始值

    arr.find(function(value) {

    if(value === 要查找的值) {

    //则包含该元素

    }})

    const myArr=[1,2,3,4,5,6];

    var v=myArr.find(value=>value>4);

    console.log(v);// 存在值 返回该元素

    var v=myArr.find(value=>value>10);

    console.lof(v);//不存在,返回undefined

    回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组

    var arry = [23,34,43,4,41,45,6];

    var v=arry.find((value,index,arr)=>{

    return index==4

    });

    console.log(v); //41 返回元素

    4.arr.findIndex()返回第一个符合条件的数组元素的位置,如果所有的元素都不符合条件,则返回-1.

    注意:find(),findIndex()弥补了index的不足:(即判断NAN)

    [NaN].indexOf(NaN) // -1

    [NaN].findIndex(y => Object.is(NaN, y))// 0

    var arry = [23,34,43,4,45,45,6];

    var i = arry.findIndex((value)=>value==4);

    console.log(i); 存在则返回元素在数组的位置,此处返回3,不存在则返回-1。

    5.for循环和if判断

    var arr = [1, 5, 10, 15];

    //传统for

    for(let i=0; i

    if(arr[i] === 查找值) {

    //则包含该元素

    }

    }

    // for...of

    for(v of arr) {

    if(v === 查找值) {

    //则包含该元素

    }

    }

    //forEach

    arr.forEach(v=>{

    if(v === 查找值) {

    //则包含该元素

    }

    })

    filter()

    filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组,数组内是所有满足条件的元素,而find()只返回第一个满足条件的元素。如果条件不满足,filter()返回的是一个空数组,而find()返回的是undefined

    var arry = [23,34,43,4,41,23,34,45,6];

    console.log(arry.filter(item=>item>40)); //[43, 41, 45] 返回符合条件的数组

    数组去重

    console.log(arry.filter((value,index,arr)=>arry.indexOf(value)===index)); //[23, 34, 43, 4, 41, 45, 6]

    展开全文
  • vue中filter的使用computed: mapState({items: state=>... 5})}),如上所示,对于vuex,我们使用mapState获取state时, 可以使用filter来过滤其中的元素filter的回调函数接受三个参数,第一...

    vue中filter的使用

    computed: mapState({

    items: state=>state.items.filter(function (value, index, arr) {return index < 5})

    }),

    如上所示,对于vuex,我们在使用mapState获取state时, 可以使用filter来过滤其中的元素,在filter的回调函数中接受三个参数,第一个是value,即每一个元素的值; 第二个是index, 即每一个元素所在的index, 第三个参数是arr,即这个数组本身。 在上面的例子中,我们最终获取到了 index < 5 的01234四个元素组成的数组,显然, filter得到的还是数组。

    快速判断一个数是否在一个数组中

    有下面几种方法可以实现:

    [54, 45, 85, 6].indexOf(6) !== -1

    上述表达式如果返回的不是-1, 就说明满足,比如上面的例子返回的时3所以属于。

    这是判断一个数是否在一个数组中最快的方法。

    二、

    使用[5, 2, 63, 8].includes(5), 如果返回true,则表明包含,但是includes在一些浏览器中并不支持,所以不能使用。

    展开全文
  • Vue组件更新我们之前有探讨过Vue的数据响应原理与nextTick的实现机制,...今天我们就来解答在Vue中组件是如何进行更新的。组件更新主要包含两个部分:虚拟DOM(Virtual DOM)和diff算法,接下来我们就分别来分析一下...

    Vue组件更新

    我们之前有探讨过Vue的数据响应原理与nextTick的实现机制,除了这两项Vue还有一个很重要的知识点:就是组件更新。我们之前学习数据响应原理的时候曾经了解到我们的数据变化是可以被监听到的,在数据变更后,Vue会进行对应的组件更新。今天我们就来解答在Vue中组件是如何进行更新的。

    组件更新主要包含两个部分:虚拟DOM(Virtual DOM)diff算法,接下来我们就分别来分析一下

    虚拟DOM

    要介绍虚拟DOM我们首先需要知道为什么使用虚拟DOM,而不是使用真是DOM?

    其中的一个原因是因为真实的DOM是一个十分复杂的浏览器对象,大家可以通过console.dir打印一个DOM来查看,所以直接操作DOM的成本是很高的,于是我们通过虚拟DOM的形式来操作,把最终的视图结果再通过真实DOM来进行渲染。

    还有一个原因是因为使用虚拟DOM可以让Vue框架在多平台上进行运行,因为如果是直接操作浏览器的真实DOM,那么我们就无法在其他平台(比如:Weex)上面使用DOM,所以说虚拟DOM其实也是赋予了我们一个脱离环境依赖的视图表现。

    说了这么多,到底什么才是虚拟DOM呢?其实本质上就是JS对象罢了,我们举个简单的例子

    /** 这是一个极简的虚拟DOM */
    const vnode = {
      tag: 'div',
      attr: {class: 'box'},
      children: [{tag: 'span', attr: {class: 'content'}, children: [1]}]
    }
    <!-- 这是真实DOM -->
    <div class="box">
      <span>1</span>
    </div>
    

    组件更新

    了解了虚拟DOM的概念,我们可以知道Vue的最终渲染都是通过虚拟DOM渲染的真实DOM。那么当数据改变时,Vue是如何通过虚拟DOM最终更新渲染成真实的DOM呢?这里Vue又做了哪些优化呢?这就要介绍一下我们的组件更新了

    组件更新主要指的是:当我们的数据变更造成虚拟DOM更改时,如何计算这其中的变更从而进行高效更新

    sameVNode

    组件更新的第一步Vue会进行通过sameVNode对老VNode和新Vnode进行对比,此时有两种情况:

    1. 如果判断是sameVNode则会进行updateVNode(diff算法)
    2. 如果判断不是sameVNode则不会进行diff判断,直接通过 创建新节点 => 更新父元素中的节点 => 删除老节点 的方式进行更新

    那么如何判断是否是sameVNode呢?我们可以看一下精简版的源码

    function sameVnode (a, b) {
      return a.key === b.key && a.tag === b.tag
    }
    

    其实主要就是判断标签名key(当然还有isComment和data...的一些判断,此处为了方便理解就忽略了

    着重注意一下这个key,当我们使用v-for的时候总是会带上的key就是它,它参与了我们sameVNode的判断,直接影响了组件更新的更新机制(之后还会出现再次介绍它的作用,此处先简单的介绍一下概念)

    updateVNode

    当确认老Vnode和新VNode是sameVnode时,我们就开始正式的更新Vnode了也就是我们的diff算法,我们再来回顾一下之前所说的简单Vnode

    /** 这是一个极简的虚拟DOM */
    const vnode = {
      tag: 'div',
      attr: {class: 'box'},
      children: [{tag: 'span', attr: {class: 'content'}, children: [1]}]
    }
    

    可以看到Vnode主要包含三部分内容tagattrchildren,我们更新时由于在sameVNode判断时就已经判断的tag,所以之后就只需要判断attrchildren,其中attr我们更新方式无非就是增、删、改,接下来主要介绍我们是如何更新children的。这里也是diff算法的核心所在

    updateChildren

    我们可以看到children是一个数组,vue中使用updateChildren来对比新children的数组和老children的数组的差别进行更新。对比更新的主要思想就是:尽量复用可以复用的VNode节点

    为了方便我们把老children数组叫做oldCh,新children数组叫做newCh,整个对比过程如下:

    首先将oldCh设置两个索引

    1. oldStartIndex标识第一个oldCh,也就是oldCh[0]
    2. oldEndIndex标识最后一个oldCh,也就是oldCh[oldCh.length - 1]

    然后同样的为newCh添加newStartIndexnewEndIndex两个索引

    举个简单的例子:

    当我们把children从 [A, B, C, D]变成[D, C, B, A, E]时,开始标记会是这样的,我这里直接使用《VueJs技术揭秘中组件更新》的例子

    ef05c88a7431a7f4fc9e98ebc7febc73.png

    了解了这个结构我们接下来介绍一下diff算法是如何一步步进行更新的

    整个diff逻辑说简单点就是:对比oldStartIndexoldEndIndexnewStartIndexnewEndIndex是否为sameVNode,如果为sameVNode说明可以复用(记得sameVNode的条件是tag与key)

    所以可以看出有两种分支:

    1. oldStartIndexoldEndIndexnewStartIndexnewEndIndex其中有sameVNode
    2. 没有sameVNode

    我们先说有sameVnode的情况:

    • oldStartIndex与newStartIndex可复用
    /** 由于位置一致直接patch,变动的节点向中间移动 */
    if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
    }
    
    • oldStartIndex与newEndIndex可复用
    /** 由于位置不一致,旧的children首部变成新的children尾部了,所以把VNode向右➡️移动到尾部,变动的节点向中间移动 */
    if (sameVnode(oldStartVnode, newEndVnode)) {
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    
    • oldEndIndex与newStartIndex可复用
    /** 由于位置不一致,旧的children尾部变成新的children首部了,所以把VNode向左⬅️移动到首部,变动的节点向中间移动 */
    if (sameVnode(oldEndVnode, newStartVnode)) {
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    }
    
    • oldEndIndex与newEndIndex可复用
    /** 由于位置一致直接patch,变动的节点向中间移动 */
    if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    

    接下来再说没有sameVNode的情况

    当此时的几个坐标都没有sameVNode时,我们会将newStartVNode遍历查询所有的oldCh看看有没有能匹配得上的节点

    • 如果有,则移动对应的节点
    • 如果没有,那么就创建新节点

    由于oldChnewCh的长度不一定一致,所以当我们遍历到一定阶段时,可能会出现oldCh或者newCh先遍历结束的情况。此时我们会对比是哪个先结束

    • oldCh先结束,说明newCh还有未插入的节点,于是新增这些未插入节点
    • newCh先结束,说明oldCh还有多余节点,于是删除这些多余节点

    整理成一张思维导图diff算法如下:

    e1435c5c8244f5ec3d52324599baf7f8.png

    其中有一个优化点就是:当我们不存在sameVNode进行遍历时,如果组件存在key,那么Vue会进行一个key与index的映射,这样我们就不用再进行遍历一个个比对查询sameVNode了,这里也是key优化组件更新的一个技巧

    大家感兴趣的话可以通过vuejs技术揭秘下方的例子检验一下自己是否掌握了diff算法~

    总结

    我们回顾一下Vue组件更新的一些原理:

    1. 虚拟DOM是什么?为什么使用虚拟DOM
      1. 减少操作真实DOM的开销
      2. 多平台的可能性
    2. 组件更新的过程
      1. 判断sameVNode
      2. updateChildren
    3. diff算法:见思维导图
    4. key的作用
      1. 区分sameVNode
      2. 通过keyToIndex优化diff的对比逻辑

    引用

    布莱恩特:解析 vue2 diff 算法zhuanlan.zhihu.com
    https://ustbhuangyi.github.io/vue-analysis/v2/reactive/component-update.html#updatechildrenustbhuangyi.github.io
    展开全文
  • 作者:Abhilash Kakumanu 译者:前端小智 来源:medium ...最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。 github 地址:https://githu.
  • 作者:Abhilash Kakumanu译者:前端小智...在处理数组时,我们经常需要在数组中查找特定的值,JavaScript 包含一些内置方法来检查数组是否有特定的值或对象。今天,我们来一起看看如何检查数组是否包含特定值或元...
  • 也就是说列表数据修改的时候,他会根据key值去判断某个值是否改变了,如果改变了就重新渲染,不然就复用之前的元素。 v-for可以使用数据本身所具有的唯一值作为key,也可以使用索引index作为key 使用index作为key时...
  • Vue列表,如何实现多选?

    千次阅读 2020-07-15 09:50:25
    第一步:写html结构时,需要将选中的状态写好,当div的class是checked-item时,是选中的状态,所以我们只需要...includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效 如果包含此id
  • arrActive.includes() 判断是否包含某一元素,它直接返回 true 或者 false 表示是否包含元素。 arrActive.splice(hash, 1) 从数组中第 hash 项删除 1 项,然后返回删除后的数组。 arrActive.push(index) 如果...
  • vue语法.rar

    2019-08-16 11:03:43
    每条数据都需要放在一个数组中 它本身就是一个构造函数 size()数据的长度 set()添加一条数据 delete()删除一条数据 get()获取一条数据 has()查找某条数据,返回一个布尔值 clear()删除所有数据 二十:教学...
  • 4.点击某行复选框时:先在数组中查找当前行是否存在,如果存在就删掉(取消勾选),如果不存在就添加到数组中(进行勾选),接着判断数组的长度与数据的长度是否相等,相等的话激活全选框,不等的话取消勾选全选框 ...
  • 改别人的代码,满屏报TypeError: Cannot read property 'length' of null,这种报错根本定位... 0",js代码也加上了if判断,然后又找到所有的for循环,也加上了判断,先确定所要操作的数组元素是否存在,再去找它的l
  • 3、保证对象的输出顺序可以把对象放在数组中,作为数组的元素 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
  • vue实例2 --简易购物车

    2018-09-20 22:22:33
    其中的template标签:vue中特殊的标签,用来...2. 页面显示的时候先判断数据中是否为空,如果为空,则显示购物车为空,否则循环遍历数据数组元素放到页面的表格 3. 该页面的第三列是个商品的数量,左右都有...
  • Vue—FindIndex的使用

    2021-01-30 09:46:01
    做项目的时候,有时候需要修改某个数组元素中的某个值,就需要找到这个数组中元素的下标值。 【内容】 // 根据id得到下标 // 默认去遍历list集合,将集合中的每个元素传入到function的item里, var index = ...
  • attributeFilter: ['src', 'style', 'type', 'name'], // 只有数组中的属性值的变化才会监听 characterData: true, // 是否监听文本节点 childList: true, // 是否监听子节点 subtree: true, // 是否监听...
  • 这就是说列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改了就重新渲染,不然就复用之前的元素。 总结一下,就是通过key值来提升渲染的效率。 2.使用 我们需要可以想办法让数组中不会变化的数据...
  • <code>defineReactive</code> 新增了数组 dep,用来存储被收集的依赖。 然后触发 set 触发时,循环dep把收集到的依赖触发。 但是这样写有点耦合,我们把依赖收集这部分代码封装起来,...
  • <p>Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是 Vue ,从性能/体验的性价比考虑,尤大大就弃用了这个特性(<a href="https://segmentfault.com/a/1190000015783546">Vue 为什么不能检测数组...
  • 列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 举个例子: ...
  • //所以hasMutationObserverBug存放了是否是这种情况 if (typeof MutationObserver !== 'undefined' && !hasMutationObserverBug) { var counter = 1 // 创建一个...
  • 在vue里面也不建议声明全局变量 <pre><code>js initCanvas() { const canvas = document.getElementById("canvas"); if (canvas.getContext) { this.ctx = canvas.getContext("2d"); ...
  • 可以理解为遍历数组元素中的唯一标识,增加或删减元素时,我们可以通过这个唯一的标识key来判断是否是之前的元素,并且该元素key的值是多少。【这个唯一标识是保持不变的】 1.当数据发生变化时,vue是怎样更新....
  • ES7/ES2016新特性

    2020-07-21 14:04:52
    不同的是:indexOf会返回一个元素在数组中的位置,如果没有找到该元素则返回-1;includes则返回true或false。 let arr = ["react", "angular", "vue"]; console.log(arr.indexOf("react")); console.log(arr....
  • -- nvue不支持伪元素before --> <text v-if="required" class="u-form-item--left__content--required">*</text> <view class="u-form-item--left__content__...
  • ES7和 ES8 一览

    千次阅读 2019-08-25 16:32:26
    es5 或者 es6 中我们要判断数组中是否包含某个元素我们需要用到Array.prototype.indexOf,es7中加入了 arr.includes(searchElement, fromIndex) let arr = ['react', 'angular', 'vue'] // Correct if (arr.index...
  • 中午刚面试完。趁热乎赶紧记下。一面是个超级温柔的小姐姐。...判断一个数组是否是等差数列的数组。 代码有用到排序让用快排实现。 公司项目自己都参与了哪部分。 vue router的两种模式,钩子函数。 vue双向数据绑

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

判断元素是否在数组中vue

vue 订阅