• v-for渲染列表
  • 维护状态
  • 数组变异方法与替换数组
  • $set、$remove
  • 对象属性实现列表渲染

一、v-for渲染列表

语法:v-for="item in items"

先来看示例:

 <style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
margin: 100px;
}
li{
line-height: 30px;
}
p{
display: inline-block;
}
span{
border: 1px solid red;
color: red;
padding: 2px;
font-size: 12px;
}
</style>

样式代码

 <ul id='example'>
<li v-for="item in newList">
<p>{{item.title}}</p>
<span v-if="item.new">新</span>
</li>
</ul>
<script>
var vm = new Vue({
el:'#example',
data:{
newList:[
{
title:"张柏芝第三胎生父",
new:true,
id:0
},
{
title:"被约谈艺人名单",
new:true,
id:1
},
{
title:"弑母男孩指认现场",
new:false,
id:2
},
{
title:"任贤齐胖到200斤",
new:true,
id:3
},{
title:"韩国解说员流鼻血",
new:false,
id:4
}
]
}
});
</script>

渲染效果:

1.1维护状态

在javascript中for作为循环遍历的特性来理解,如果列表的节点发生变化时,v-for指令就会从新遍历数据渲染页面,比如添加,删除,替换节点操作,这种情况下一般会有原本没有发生变化的节点被重新渲染,vue给出了解决方案就是在每一项上添加一个唯一标识:v-bind:key="ID",id为数据中提供的唯一标识,有了这个唯一标识在节点发生变化时,没有变化的节点会重用,不会重复渲染,这样就大大增强了渲染效率。所以在上面的示例中可以添加这样一个唯一标识:

<li v-for="item in newList" :key="item.id">

1.2数组变异方法

在javascript中向数组中修改数组的元素值时,通常都采用索引的方式来修改,在vue中同样可行,比如将上面示例的第二项的title修改成“模特核电站不雅照”,视图也会同样触发从新修改。

vm.newList[1].title="模特核电站不雅照";//这样的数据修改可以触发相关项的节点渲染

但是这种索引的方式并不是万能的,比如:vm.newList[2]="";这个数据变化就不会触发页面的渲染,还有比如:vm.newList[5]={title:"泰妍自曝患抑郁症",new:true,id:5},这个添加数据也不会触发页面渲染,这种情况就需要用到vue的数组变异方法和替换方法了:

push()在数组后面添加一组数据,并且触发页面渲染(在上面的示例基础上操作): vm.newList.push({title:"冰毒成为头号毒品",new:true,id:6}); push()方法会把组数据渲染到列表的最后面。

unshift()在数组的最前面添加一组数据,并且触发页面渲染(渲染到列表的最上面): vm.newList.unshift({title:"模特核电站不雅照",new:false,id:7}); 。

shift()删除第一组数据;

pop()删除最后一组数据;

splice()删除并向数据中添加新的数据,与js数组的效果一致,如果不写入添加数据,就同等与在数据中删除指定的数据,会触发页面渲染。

sort()排序;

reverse()颠倒数据顺序;

1.3替换数组

所谓替换数组就是将列表数据指向从原来的数组完全改变指向另一个数组,比如js数组的filter()、concat()、slice()这些方法总是返回一个全新的数组,其实非常的简单,直接改变数据指向即可,例如基于上面示例操作: vm.newList = [{title:"我是全新数组的第一项title",new:true,id:0}] 执行这行代码后,就被替换成了一个全新的数组,页面刷新只有当前数组的一项渲染数据。

1.4$set、$remove

在js中通过索引对数据进行进行局部操作是最精确最有效的一种方式,但是在前面的数组变异方法中我提到了采用数组索引方式不能触发视图更新,别着急,vue给我们提供了一个可以实现索引操作数据并触发视图更新的方法:

Vue.set语法:Vue.set(vm.items, indexOfItem, newValue),Vue的全局方法set;

vm.$set语法vm.$set(vm.items, indexOfItem, newValue),Vue的实例方法$set();

也可以使用变异方法splice()来实现:vm.items.spleice(indexOfIndex, 1, newValue)。

如果是需要改变数组长度的话可以使用这样的方式:vm.items.splice(newLength)。

例如根据上面的示例修改索引为3的数据:

Vue.set(vm.newList, 3, {title:"我从三变成了6", new:true,id:6}) 但是需要注意的是如果没有索引为3的这组数据的话会出错。

vm.$set(vm.newList, 4, {title:"我从4变成了8", new:true,id:8}) 这其实没有区别,但是如果存在作用域反问层级多的话采用这个映射方法效率应该要高一些。

如果需要改变数组长度的话就直接使用splice解决,然后 vm.newList.splice(2);

最后关于$remove的使用,前面提到过可以使用变异方法splice()实现,而$remove就是splice的语法糖(这里遇到一些问题,暂时没解决)。

二、对象属性实现列表渲染

 <ul  id='example'>
<li v-for="(value,key,index) in newObj">{{value}}--{{key}}--{{index}}</li>
</ul>
<script>
var vm = new Vue({
el:'#example',
data:{
newObj:{
name:"他乡踏雪",
sex:"男",
age:18
} }
});
</script>

渲染结果:

这个简单的示例可以看到在v-for="(par1, par2, par3) in newObj"中的获取的数据分别是属性值、属性名称、属性索引。

2.1对象列表渲染数据更新

直接通过对象属性更新属性值可以触发页面渲染,比如 vm.newObj.name = "他乡踏雪~丹" ,但是直接采用点语法添加属性或者采用对象方法删除属性就不能触发页面渲染。这时候同样使用vue的$set()方法,例如 vm.$set(vm.newObj,"skill","vue"),这行代码就可以新增一个对象属性skill,并且将值“vue”渲染到页面;也可以通过$set()方法更新指定属性的值。

最后,注意一种情况就是v-for指令的优先级大于v-if,也就是说在同一个标签中出现了这两个指令,当v-if的值为false时,依然会触发列表渲染,v-if失效。遇到这种情况最好使用<template>标签包括来实现v-if触发。

vue入门:(v-for指令与列表渲染)的更多相关文章

  1. 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...

  2. Vue学习(五):列表渲染

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 自学笔记(5) 列表渲染

    列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON ...

  4. vue入门例子

    vue入门例子 1.声明示渲染        {{message}} 2.绑定事件 v-bind 3.控制切换一个程序是否显示        v-if 4.渲染循环                  ...

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

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

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

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

  7. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  8. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  9. vue 快速入门、常用指令(1)

    1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...

随机推荐

  1. Python数据分析中 DataFrame axis=0与axis=1的理解

    python中的axis究竟是如何定义的呢?他们究竟代表是DataFrame的行还是列? 直接上代码people=DataFrame(np.random.randn(5,5), columns=['a ...

  2. Spring Security在登录验证中增加额外数据(如验证码)

    在使用Spring Security框架过程中,经常会有这样的需求,即在登录验证时,附带增加额外的数据,如验证码.用户类型等.下面将介绍如何实现. 注:我的工程是在Spring Boot框架基础上的, ...

  3. IDEA如何构建mybatis

    任何一个软件都要和数据库关联,软件需要的数据都存储在数据库中. 对于经常使用的数据库相关的代码就出现了很多冗余的代码,持久层框架也随之出现. 目前使用比较流程的持久层框架有hibernate和myba ...

  4. Linux学习—maven安装

    1.下载maven安装包 cd /usr/local/ wget http://mirror.bit.edu.cn/apache/maven/maven-//binaries/apache-maven ...

  5. Django之contenttypes组件

    目录 一. 介绍 二. 应用场景 1. 表结构设计的演变 2. GenericForeignKey和GenericRelation 3. 测试 一. 介绍 Django包含一个contenttypes ...

  6. Java之属性和普通方法

    一.定义类 上一节讲了很多深奥的理论,那么这节我们就得实践一下,先简单描述一下我们的实体世界:有一个学生小明,那么这个学生就是一个对象,这个对象有哪些属性和方法呢,我们可以先简单抽象一下,属性有(姓名 ...

  7. 20190526 - CentOS 7 中 安装 MySQL 8 并授权 root 远程访问

    1. CentOS 7 中 安装 MySQL 8 CentOS 7 中内置 MariaDB 建议升级一下用,性能好很多.但如果一定要用 MySQL 8,就得自己装. 坦白的说,Oracle 升级 My ...

  8. 刀塔OMG塔防1.23单机版使用方法

    使用方法1.确保魔兽的版本为1.26(低版本会报错),如果版本不对用附件中的版本转换器转一下2.把 omg.w3x 复制到 魔兽的MAPS文件夹 WarcraftIII 游戏根目录\Maps3.双击运 ...

  9. MySQL连接处理方式及最佳并发连接数设置

    MySQL连接处理方式及最佳并发连接数设置 mysql是单进程,多线程的架构,通过创建多个线程来服务不同的用户连接,通常情况下,随着用户连接数的增加,mysql内部用于处理用户连接的线程也会同步的增长 ...

  10. openresty+lua+kafka方案与Tomcat接口并发度对比分析

    1.openresty+lua+kafka 1.1 openresty+lua+kafka方案 之前的项目基于nginx反向代理后转发到Tomcat的API接口进行业务处理,然后将json数据打入ka ...