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的响应式渲染提供方法,在列表中单条数据改变的情况下 ...
随机推荐
- try catch 块中debug时发现错误细节的一次记录
在解决已有代码的一个问题时,有一个try catch块,基本代码如下: try { //do something } catch { LogHelper.Debug(typeof(myHelper), ...
- mysql中数据库与数据表编码格式的查看、创建及修改
一.查看数据库编码格式 ? 1 mysql> show variables like 'character_set_database'; 二.查看数据表的编码格式 ? 1 mysql> s ...
- 洛谷P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
- 洛谷P3396 哈希冲突（分块）
传送门 题解在此,讲的蛮清楚的->这里 我就贴个代码 //minamoto #include<iostream> #include<cstdio> #include< ...
- 消息中间件 | 消息协议 | MQTT3.1.1 -- 《分布式 消息中间件实践》笔记
1999年,IBM和合作伙伴共同发明MQTT协议 14年,MQTT正式成为推荐的物联网传输协议标准 常应用于很多机器计算能力有限.底带宽.网络不可靠的远程通信应用场景中. 主要概念 MQT ...
- java监听器原理理解与实现
监听器模型涉及以下三个对象,模型图如下: (1)事件:用户对组件的一个操作,称之为一个事件(2)事件源:发生事件的组件就是事件源(3)事件监听器(处理器):监听并负责处理事件的方法 执行顺序如下: 1 ...
- JPA规范基础 ppt教程
https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html
- Jetty项目解压目录设置
Ubuntu14.04 没有在Jetty的根目录下建立work文件夹时,Jetty会默认将项目解压到/var/cache/jetty/data/下,如果在Jetty的根目录下建立work文件夹,jet ...
- 【计算机网络】ssl双向认证和单向认证原理
有朋友在搞一个项目,周末有聊到一些安全性的东西,很自然会想起https,但https究竟如何实施,其原理又是什么? 基于ssl,一般的应用都是单向认证,如果应用场景要求对客户来源做验证也可以实现成双向 ...
- 【Java密码学】Java SE 6中XML数字签名的实现
package test.xml.signature; import java.io.File; import java.io.FileInputStream; import java.io.File ...