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)的更多相关文章

  1. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  2. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  3. Vue源码后记-vFor列表渲染(1)

    钩子函数比较简单,没有什么意思,这一节搞点大事情 => 源码中v-for的渲染过程. vue的内置指令包含了v-html.v-if.v-once.v-bind.v-on.v-show等,先从一个 ...

  4. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  5. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  6. Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  7. Vue.js优雅的实现列表清单的操作

        一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...

  8. Vue.js优雅的实现列表清单

        一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...

  9. vue项目开发之v-for列表渲染的坑

    不知道大家在用vue开发的过程中有没有遇到过在使用v-for的时候会出现大片的黄色警告,比如下图: 其实这是因为没有写key的原因 :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下 ...

随机推荐

  1. viewstate的基本用法

    转自:http://www.cnblogs.com/ooip/p/4743536.html 在web窗体将控件属性设置为runat=server时,这个控件会被添加一个隐藏属性_ViewState,_ ...

  2. Asp.net Core 使用 EntityFrameworkCore 1.1

    前言 相比大家也在开发中是非常喜欢用ORM的.今天就来介绍一下EntityFrameworkCore的使用方法. 自从EF Core升级到1.1之后,确实变化挺大的.如果没试过真的不知道坑是挺多的.今 ...

  3. 【OpenGL】Shader概述

    目录(?)[-] 综述 编译一个Shader 链接一个Shader 删除一个Shader 指定使用一个Shader Program 删除一个Shader Program 备注 这篇文章讲述了Shade ...

  4. 【leetcode 239. 滑动窗口最大值】解题报告

    思路:滑动窗口的思想,只要是求连续子序列或者子串问题,都可用滑动窗口的思想 方法一: vector<int> maxSlidingWindow(vector<int>& ...

  5. oracle例程

    原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...

  6. msyql分区与分库分表

    分区 工作原理 对用户而言,分区表是一个独立的逻辑表,但是底层MySQL将其分成多个物理子表,这对用户来说是透明的,每一个分区表都会使用一个独立的表文件. 如果数据量比较大,可以进行分区.分区对PHP ...

  7. Idea提示没有符号类错误解决

    将提示没有符号类的文件打开,右键单独编译一次,再重新打包即可解决

  8. Technical support website

    Technical support:Please leave a message if you have any questions or suggestions. email: swvrwafet@ ...

  9. IOS 关于tableview中cell的长按手势

    说明:虽然是tableview中cell的长按手势  但是手势是添加在tableview上的 UILongPressGestureRecognizer *longpress = [[UILongPre ...

  10. 使用jdk的xjc命令由schema文件生成相应的实体类

    xjc D:\operate-process.xsd -d D:\workspace\wmsc\src\main\java -p com.yd.wmsc.util operate-process.xs ...