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()来排序

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

  • 相关阅读:
    DataGridView 复选框 操作大全
    ClickOnce 创建桌面快捷方式
    测量程序经过的时间
    C# Js 时间格式化问题
    MVC 漫长之路(一)
    SQL 查一年内的数据
    DataRow对象的RowState和DataRowVersion属性特点
    iOS打开百度地图、高德地图导航
    NSURLCache 和 NSCache 的区别
    MagicalRecord的使用(第三方库实现的数据库)
  • 原文地址:https://www.cnblogs.com/dabingqi/p/9180628.html
Copyright © 2011-2022 走看看