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的响应式渲染提供方法,在列表中单条数据改变的情况下 ...
随机推荐
- viewstate的基本用法
转自:http://www.cnblogs.com/ooip/p/4743536.html 在web窗体将控件属性设置为runat=server时,这个控件会被添加一个隐藏属性_ViewState,_ ...
- Asp.net Core 使用 EntityFrameworkCore 1.1
前言 相比大家也在开发中是非常喜欢用ORM的.今天就来介绍一下EntityFrameworkCore的使用方法. 自从EF Core升级到1.1之后,确实变化挺大的.如果没试过真的不知道坑是挺多的.今 ...
- 【OpenGL】Shader概述
目录(?)[-] 综述 编译一个Shader 链接一个Shader 删除一个Shader 指定使用一个Shader Program 删除一个Shader Program 备注 这篇文章讲述了Shade ...
- 【leetcode 239. 滑动窗口最大值】解题报告
思路:滑动窗口的思想,只要是求连续子序列或者子串问题,都可用滑动窗口的思想 方法一: vector<int> maxSlidingWindow(vector<int>& ...
- oracle例程
原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...
- msyql分区与分库分表
分区 工作原理 对用户而言,分区表是一个独立的逻辑表,但是底层MySQL将其分成多个物理子表,这对用户来说是透明的,每一个分区表都会使用一个独立的表文件. 如果数据量比较大,可以进行分区.分区对PHP ...
- Idea提示没有符号类错误解决
将提示没有符号类的文件打开,右键单独编译一次,再重新打包即可解决
- Technical support website
Technical support:Please leave a message if you have any questions or suggestions. email: swvrwafet@ ...
- IOS 关于tableview中cell的长按手势
说明:虽然是tableview中cell的长按手势 但是手势是添加在tableview上的 UILongPressGestureRecognizer *longpress = [[UILongPre ...
- 使用jdk的xjc命令由schema文件生成相应的实体类
xjc D:\operate-process.xsd -d D:\workspace\wmsc\src\main\java -p com.yd.wmsc.util operate-process.xs ...