zoukankan      html  css  js  c++  java
  • vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图

    push()

    pop()

    shift()

    unshift()

    splice(i,n,arr)

    sort(xx)

    reverse()

    ex: app.book.push({

      name:'css',

      author:'lee'

    })

    有些方法不会改变数组

    filter()

    concat()

    slice()

    返回新数组  需要用 新返回的数组 更新原数组

    app.books= app.books.filter(functiion(item){

         return item.name.match(/javascript/)

    })

    vue 不能检测到数组变化 不能触发视图更新:

    1 通过直接搜影 更改变量 

        ex app.book[3] = 'xxxx';

    2 修改数组的长度

      app.books.length =1;

    解决这个问题 俩种方法

    1 vue 内置的set方法 类 splice

      Vue.set(app.books,3,{

        name:'qqq',

        author:'qjb'

      })

    2 webpack 没有引入Vue 用 $set

     this.$set(app.books,3,{

      name:'css',

      author:'qjb'

    })

    this指向组建的实例 既 app ,可以使用app.$set()

    3  使用 splice

     appp.book.splice(3,1,{

      name:'css',

      author:'qjb'

    })

    splice(索引,删除的数量(0不删除),插入的变量arr1,arr2,arr3)

    更改索引

     app.books.splice(1);

    、、、、过滤与排序。。。。。。。

    不改变原数组 

     computed:{

      filterBooks:function(){

        return this.books.filter(function(book){

          return book.name.match(/javascript/)

        })

      }

    }

    sort()来排序

    、、、、、、、、、、、、、、、、、、、、、、

  • 相关阅读:
    英语俚语里的gotta和gonna
    如何设置Win XP远程登录如何远程控制电脑
    C#中as与is的用法(收藏)
    just用法
    even用法
    up to用法小结
    go out with用法
    realize与recognize辨析
    go through用法
    堆优先队列
  • 原文地址:https://www.cnblogs.com/dabingqi/p/9180628.html
Copyright © 2011-2022 走看看