vue 自学笔记(5) 列表渲染
列表渲染
一:v-for 指令
当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表。并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON 数据,通常会是一个数组或者对象。
针对这样的情景,Vue 提供了 v-for
指令使列表使我们可以根据一组数组的选项列表进行渲染。并且,我们只需要写一个列表元素作为模板就可以通过遍历属性的方式渲染出大量的列表内容。
当然,除了列表,也可以通过v-for
重复渲染其他元素,这里我们使用v-for
重复渲染 div,v-for="(item, index) of list"
是一个固定的语法,参数第一项为遍历 list 属性的每一项,参数第二项为遍历 list 时的索引。
除了item of items
这种写法,使用item in items
也是可以的。(items 是源数据数组并且 item 是数组元素迭代的别名)。
注意:!!
二:对vue 数组数据的修改
现在页面有 5 个数据,我们在控制台 vm.list[5] = '123',添加一条数据,发现 vm.list 虽然多了一条数据,但页面没有响应式的变化
vue 自学笔记(5) 列表渲染的更多相关文章
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- vue自学笔记
做前端也做了一段时间了,为了高薪,不能一直做网页不是~~,所以从今天开始整理vue的笔记 内容都是从网上搜集整合并且自己实践过了的,需要注意的点,也在后面标注了“注” 当然了,如果有什么问题的 ...
- 微信小程序学习笔记二 列表渲染 + 条件渲染
1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为 ...
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- vue 自学笔记(1)
从to do list 开始 一: 安装 1: 导入cdn <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js& ...
- Vue(8)列表渲染v-for
循环 在模板中可以用v-for指令来循环数组,对象等. 循环数组 我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items形式的特殊语法,其中 it ...
- vue 自学笔记(七) 组件细节问题
前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...
- vue学习笔记:数据渲染操作
{{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...
随机推荐
- 分库工具mysql
sharding-sphere 比mycat 更方便 在于mycat属于中间件,更复杂,但也支持更多功能.查询功能更强.
- 解决win10电脑VB虚拟机无法安装64位系统的方法
64位电脑在VB虚拟机里却只能安装32位系统怎么办? **原因:CPU虚拟化未开启 只要CPU虚拟化开启即可解决问题. 开启步骤: 1.打开电脑设置 2.进入 更新和安全 界面 3.进入 恢复 界面 ...
- IIC基本概念和基本时序
1. IIC基本概念和基本时序 1.1 I2C串行总线概述 I2C总线是PHLIPS公司推出的一种串行总线,是具备多主机系统所需的包括总线裁决和高低速器件同步功能的高性能串行总线. 1.I2C总线具有 ...
- JVM思考-init和clinit区别
JVM思考-init和clinit区别 目录:JVM总括:目录 clinit和init的区别其实也就是Class对象初始化对象初始化的区别,详情看我上一篇博客: JVM总括四-类加载过程.双亲委派模型 ...
- PHP 获取周,月列表
PHP的date函数以及strtotime函数是很强大的.基本上围绕这2个函数就能处理绝大多数日常开发中日期的处理. 假设有一个需求是按周,月获取最近7周和最近7月的查询.那么我们肯定要划分出时间区间 ...
- 《C#从现象到本质》读书笔记(五)第5章字符串第6章垃圾回收第7章异常与异常处理
<C#从现象到本质>读书笔记(五)第5章字符串 字符串是引用类型,但如果在某方法中,将字符串传入另一方法,在另一方法内部修改,执行完之后,字符串的只并不会改变,而引用类型无论是按值传递还是 ...
- mysql---select的五种子句学习(where、group by、having、order by、limit)
mysql---select的五种子句学习(where.group by.having.order by.limit) 分类: Mysql学习2012-09-27 16:14 1533人阅读 评论 ...
- 数据库-mysql命令
1.项目过程:概要设计阶段 —— 架构师 任务:技术选型(网络/语言/框架).项目结构(子系统/模块).数据结构(数据特点/内容) 项目中存储数据的方式: (1)服务器内存:存取速度快:非永久存储.容 ...
- JS基础-数组的常用方法-冒泡排序
1.数组 1.关联数组 以数字作为元素下标的数组,就是索引数组. 以字符串作为元素下标的数组,就是关联数组. 2.js的关联数组 ex:在php中 $array=[& ...
- selenium中动作链的使用
一.问题 我们有时候在使用selenium的时候,会遇到悬停后点击元素的操作,因此需要一个动作链来完成这个功能. 二.解决 从selenium的包中导入actionchains函数,利用xpath找到 ...