在Vue官网中写道,vue无法直接用索引设置元素,

如 vm.items[0] = {}

提出的解决方法是用 :

example1.items.$set(0, { childMsg: 'Changed!'});

但是发现,如果用了这个方法之后,再使用vm.items[i]={};是有作用的。

同样vue中无法通过将数组长度制为0来让数组为空,只能使用

this.items.$remove(item);

此时去直接赋值是有效果的。

查看源码,vue提供的两种方法都是通过splice方法来实现,如下:

def(arrayProto, '$set', function $set(index, val) {
if (index >= this.length) {
this.length = Number(index) + 1;
}
return this.splice(index, 1, val)[0];
});

def(arrayProto, '$remove', function $remove(item) {
/* istanbul ignore if */
if (!this.length) return;
var index = indexOf(this, item);
if (index > -1) {
return this.splice(index, 1);
}
});

因此都是需要变异方法来改变变量的值

vue 列表渲染的更多相关文章

  1. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  2. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  3. Vue入门系列(三)之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

  6. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  7. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  8. vue 列表渲染 v-for

    1.数组列表       v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染       v-for="item ...

  9. vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...

  10. Vue:列表渲染 v-for on a <template>

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...

随机推荐

  1. 关于Hadoop的集群环境下虚拟机采用NAT方式连不上网的解决

    使用虚拟机搭建hadoop集群的时候采用的是NAT方式联网,但是会出现时常掉网的现象,查看后排查了很久也没有发现什么问题. 很可能是Windows下的NAT服务没有开启,这时候尽管虚拟机和主机是在一个 ...

  2. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  3. Freemarker与Springmvc

    1.导入springmvc和freemarker的jar包 2.web.xml中配置Spring和Springmvc <?xml version="1.0" encoding ...

  4. java程序设计之完数

    题目:一个数如果恰好等于它的因子之和,这个数就称为"完数".例如6=1+2+3.编程 找出1000以内的所有完数. 解题过程也很简单: public class wanshu { ...

  5. 用于灰度变换的一些实用的M函数

    关于MATLAB中如何对错误处理进行编程,先介绍一些东西: 函数nargin可以检测输入到M函数的参数的数目: 函数nargout可以检测M函数的输出: 函数nargchk能够在M函数体中检测传递的参 ...

  6. php配置参数.md

    php 5.5 配置文件 php.ini Options user_ini.filename string 设定了 PHP 会在每个目录下搜寻的文件名:如果设定为空字符串则 PHP 不会搜寻.默认值是 ...

  7. makefile--subst

    Makefile里的subst用法是$(subst FROM,TO,TEXT),即将TEXT中的东西从FROM变为TOMakefile中的字符串处理函数格式:    $(subst ;,;,;)名称: ...

  8. docfx组件介绍--YamlSerialization

    在docfx中把元数据以yaml的形式保存,在metadata阶段会序列化数据到yaml文件中,在build阶段又需要从yaml文件反序列化出来.在使用过程中,意外发现yamldotnet在处理大量强 ...

  9. SQLite剖析之临时文件、内存数据库

    一.7种临时文件    SQLite中,一个数据库由单个磁盘文件构成,简化了SQLite的使用,因为移动或备份数据库只要拷贝单个文件即可.这也使得SQLite适合用作应用程序文件格式.但是,当在单个文 ...

  10. 解决 PHPExcel 长数字串显示为科学计数

    解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...