vue入门:(v-for指令与列表渲染)
- 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指令与列表渲染)的更多相关文章
- 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- Vue学习(五):列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 自学笔记(5) 列表渲染
列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON ...
- vue入门例子
vue入门例子 1.声明示渲染 {{message}} 2.绑定事件 v-bind 3.控制切换一个程序是否显示 v-if 4.渲染循环 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- vue 快速入门、常用指令(1)
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...
随机推荐
- java常用的正则表达式的工具类
import com.google.common.base.Strings; import java.util.regex.Matcher;import java.util.regex.Pattern ...
- 301跳转与URL转发有什么区别
在购买域名时,域名本身是不带有www的,但由于域名要通过DNS服务器解析后才可以使用,在这个过程中每一个域名是会指向一个web服务器ip地址,由于在很早之前网站方都会增加一个"www&quo ...
- 通过反射将一个java对象的属性值转换为一个Map
将一个java对象的属性值转换为一个Map: import java.beans.BeanInfo;import java.beans.Introspector;import java.beans.P ...
- Spring下使用Redis
在Spring中使用Redis使用使用两个依赖包jedis.jar.spring-data-redis.jar 一下是Maven项目pom.xml添加依赖 <!--jedis.jar --> ...
- Ubuntu端口常用命令
# 查看哪些进程打开了指定端口port(对于守护进程必须以root用户执行才能查看到) lsof -i:port # 查看哪些进程打开了指定端口port,最后一列是进程ID(此方法对于守护进程作用不大 ...
- Hadoop集群参数和常用端口
一.Hadoop集群参数配置 在hadoop集群中,需要配置的文件主要包括四个,分别是core-site.xml.hdfs-site.xml.mapred-site.xml和yarn-site.xml ...
- 转载:深入理解Spring MVC 思想
原文作者:赵磊 原文地址:http://elf8848.iteye.com/blog/875830 目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.sp ...
- java数据结构之HashSet和TreeSet以及LinkedHashSet
一.HashSet源码注释 public class HashSet<E> extends AbstractSet<E> implements Set<E>, Cl ...
- SpringCloud+Eureka快速搭建微服架构
什么是springcloud? Springcloud是一个微服务框架,相比dubbo等,springcloud提供全套的分布式系统解决方案. Eureka是什么? Eureka是netflix的一个 ...
- 【AMAD】django-oauth2-provider -- 为你的app提供Oauth2的访问
简介 个人评分 简介 django-oauth2-provider1主要是为django集成oauth2加入了不少的工具,比如装饰器,Base View, Authentication Backend ...