1、数组更新数据,引起视图更新

数据驱动:数据发生变化,引起视图的变化

Vue在检测数组变化的时候,并不是直接重新渲染整个列表,而是最大化的复用Dom元素。

替换的数组中,含有相同元素的项是不会被重新渲染,所以,新数组替换旧数组是,不用担心性能问题。

数组函数:

改变原数组

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

产生新数组,替换原数组

filter()

concat()

slice()

以下两种情况下,Vue不能检测到:

1.直接索引赋值:  app.books[3] = {...}  =>Vue.set(app.books,3,{...})  或  this.$set(app.books,3,{...})

2.修改数组长度: app.books.length=1  => app.books.splice(1);

2、使用计算属性,使用数组的副本进行数据操作,不改变数组本身

 computed: {
filterBooks: function () {
return this.books.filter(function (item) {
return item.name.match(/Javascript/);
})
}
}

  

Vue指令(二)--数组的变动的更多相关文章

  1. Vue指令及自定义指令的使用

    导航列表: 一.vue指令 二.自定义指令 一.vue指令 回到顶部    1. v-text v-text主要用来更新textContent,可以等同于JS的text属性,不会解析标签,会把标签解析 ...

  2. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  3. Vue中无法检测到数组的变动

    本周在写项目中遇到修改数组中的值时,视图无变化问题.在查阅Vue官方文档后了解到,由于由JavaScript 的限制,Vue 不能检测以下数组的变动: 当利用索引直接设置一个数组项时,例如:vm.it ...

  4. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  5. Vue学习二:v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  6. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  7. 第三篇:Vue指令

    Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...

  8. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  9. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

随机推荐

  1. Selenium爬取元素下子元素方法

    Selenium提供了一下方法来定义一个页面中的元素: find_element_by_id find_element_by_name find_element_by_xpath find_eleme ...

  2. Linux系统如何迁移至LVM磁盘

    今天遇到一个问题,算是比较严重的把.就是要把当前系统转移到 LVM 卷里面去,下面有一些发生过程介绍. 不感兴趣可以直接跳过,看实战部分<如何迁移系统至LVM卷> 朋友今天突然找我,说是要 ...

  3. ArchLinux下Ecplise软件报错

    如果你的Java出现了一下问题:An error has occurred. See error log for more details.java.lang.NullPointerException ...

  4. top 常用命令

    参考文档: http://www.cnblogs.com/allen8807/archive/2010/11/10/1874001.html [root@linux ~]# top [-d] | to ...

  5. web 应用的部署

    一.项目管理 : zentao(国产开源),其他 project.redmine.trac 二.自动部署: jenkins:自动化配置 docker:容器,类似虚拟机,不过只是本机系统的内核的一个虚拟 ...

  6. 接口自动化 之 unittest+ddt+openpyxl 综合

    前面写过python 之 unittest初探 和 python 之 unittest+ddt 两篇文章.在之前的文章中,写过可以再次优化.今天写第三篇的目的,就是在原有基础上,基于 openpyxl ...

  7. paraview鼠标选择网格

    虽然可以根据ID选择网格,但是有时候需要选择可见面,直接鼠标比较方便,可以直接按一下键盘"S",这时候鼠标变成十字型,然后鼠标左键选择区域.

  8. Django的模板与母版

    Django的模板与母版 Python Django 模板 母版  Django模板系统 与Django模板有关的官方文档 语法相关 变量相关 {{ 变量名 }}  {{ name }},{{name ...

  9. R 安装包遇到问题(一) loadNamespace()里算'rJava'时.onLoad失败了 rJava 包的安装与载入

    > library(xlsx) Error: package or namespace load failed for ‘xlsx’: loadNamespace()里算'rJava'时.onL ...

  10. lxml.html 中几种解析器的区别(转)

    原文地址:https://blog.csdn.net/chroming/article/details/77104874