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的响应式渲染提供方法,在列表中单条数据改变的情况下 ...
随机推荐
- linux上运行jmeter-server失败
1. 在linux上运行jmeter-server报如下错误 处理办法: 通过如下命令运行 ./jmeter-server -Djava.rmi.server.hostname=192.168.16. ...
- 【Spring-任务调度】
Spring-任务调度: spring内部有一个task是Spring自带的一个设定时间自动任务调度task使用的时候很方便,但是他能做的东西不如quartz那么的多!可以使用注解和配置两种方式,配置 ...
- limit 检索记录行
LIMIT 子句可以被用于强制 SELECT 语句返回指定的记录数.LIMIT 接受一个或两个数字参数.参数必须是一个整数常量.如果给定两个参数,第一个参数指定第一个返回记录行的偏移量,第二个参数指定 ...
- 读取某文件夹下所有excel文件 python
import os import pandas as pd from sklearn import linear_model path = r'D:\新数据\每日收益率' filenames = os ...
- vue -- 打包资源正确引用及背景图引入
一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解 ...
- 微信小程序小结（2） ------ 自定义组件
在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...
- 【原创】智能合约安全事故回顾分析（1）：The Dao事件
首先需要说明的一点是,这个世界上没有绝对安全的技术.在区块链发展的十年里,各种基于区块链的数字货币引发的安全事故层出不穷,这些安全威胁主要来源有三个方面: 自身安全机制的问题,类似智能合约. 生态安全 ...
- 关于VS2017提示I/O文件操作函数需要加上_s的解决办法
最近不论是在写网络编程还是在写小项目时候,都会提示让我用加个_s的函数........ 其实加上_s这个函数是为了确保函数的安全性,确保不会有内存不够或者溢出的情况.但是每次都需要重新看一下_s函数的 ...
- 【aspnetcore】配置使用jwt验证
因为害怕token泄露出现问题,所以从未在项目中使用jwt.但这玩意现在真的很火,趁有空还是研究了一下. 在aspnetcore中实现jwt很简单,感觉微软把很多工作都做了,虽然开发效率上去了,但是使 ...
- 002 Add Two Numbers 链表上的两数相加
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...