Vue.js（2.x）之列表渲染（v-for/key）
1.v-for是Vue里的循环语句，与其他语言的循环大同小异。首先得有需要循环且不为空的数组，循环的关键字为in或of。
需要索引时的写法：
v-for里的in可以使用of代替：
还可以使用v-for的<template>标签循环多个元素块：
对象迭代v-for：可通过一个对象属性迭代
这种可以提供数字索引的挺好，跟其他语言一样，索引从0开始。
整数迭代 v-for：n从1开始，不像索引一样从0开始。且只有整数可以这样，换成小数、字母均无效。
HTML代码示例图：
浏览器页面与控制台示意图：
组件现在还不会，先略过。
v-for with v-if：官网文档就干干地写了这么三行，没完整的例子，还是自己随便写个完整的看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="example">
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.age }}
</li>
</ul>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
todos: {
'Lily' : {
isComplete: 0,
age: 25
},
'Lucy': {
isComplete: 1,
age: 29
},
'Marry' : {
isComplete: 0,
age: 20
}
}
}
})
</script>
</body>
</html>
页面效果图：
在浏览器控制台输入：vm.todos.Lucy.isComplete = 0，效果图如下：
根据实际情况使用v-if与v-for，如果可以将使用v-if判断再使用v-for循环，这样效率要比它们都在同一节点效率高。
2.key:官网的介绍看不懂，搜索后找出一个一位解释的相对好理解的答案。
https://www.zhihu.com/question/61064119/answer/183717717，部分截图如下：
Vue.js（2.x）之列表渲染（v-for/key）的更多相关文章
- vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- Vue源码后记-vFor列表渲染（1）
钩子函数比较简单,没有什么意思,这一节搞点大事情 => 源码中v-for的渲染过程. vue的内置指令包含了v-html.v-if.v-once.v-bind.v-on.v-show等,先从一个 ...
- Vue 列表渲染中的key
首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- Vue.js 系列教程 1：渲染，指令，事件
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- Vue.js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
- Vue.js优雅的实现列表清单
一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...
- vue项目开发之v-for列表渲染的坑
不知道大家在用vue开发的过程中有没有遇到过在使用v-for的时候会出现大片的黄色警告,比如下图: 其实这是因为没有写key的原因 :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下 ...
随机推荐
- 杭电acm 1022题
Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...
- cocos2dx之tolua++全面分析（一）：tolua++工具本身
在cocos2dx/tools/tolua++下面,有大量pkg文件,这些是按tolua++要求格式写好的.需要导出到lua中的c++类描述文件. 每当在c++类里增加了新函数需要导出时,应同步修改相 ...
- GCC源码编译
1. gcc源码下载 ftp://gcc.gnu.org/pub/gcc/releases/ [yhwang@yhwang ~] wget ftp://gcc.gnu.org/pub/gcc/rele ...
- 电脑MAC地址
电脑MAC地址(Media Access Control) MAC地址是固化在网卡上串行EEPROM中的物理地址,通常有48位长.用来表示互联网上每一个站点的标识符,采用十六进制数表示. 任一网络设备 ...
- Java对象在内存中的状态
可达的/可触及的 Java对象呗创建后,如果被一个或者多个变量引用,那就是可达的,即从根节点可以触及到这个对象. 其实就是从根节点扫描,只要这个对象在引用链中,那就是可触及的. 可恢复的 Java对象 ...
- 【TMF eTOM】eTOM的概念和术语
eTOM的概念 为了有效地理解和使用eTOM业务流程框架,我们首先要理解构成eTOM的关键概念.这些概念使eTOM成为集成业务流程设计/评估与传统过程的一个非常有效的工具.在这些概念中使用了在本文中详 ...
- 支持Mono的盘古分词（PanGu）
不废话,直接上下载地址http://files.cnblogs.com/files/RainbowInTheSky/PanGu.rar 群友在做项目移植到Mono+jexus上时遇到了问题,盘古分词无 ...
- Boost Python学习笔记（四）
你将学到什么 在Python中调用C++代码时的传参问题 基础类型 Python的字符串是常量,所以C++函数参数中的std::string &必须为const 修改源文件(main.cpp) ...
- 递归实现从n个数中选r个数的组合数
#include <stdio.h> #include <stdlib.h> ], count; void comb(int m, int k) { int i, j; for ...
- Codeforces#514D(三分，简单二维几何）
#include<bits/stdc++.h>using namespace std;const double eps=1e-8;int n; struct node{ double ...