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. assert.strictEqual()

    assert.strictEqual(actual, expected[, message]) 使用全等运算符(===)测试 actual 参数与 expected 参数是否全等. // 格式 ass ...

  2. hibernate框架内容整理 学习

    1.1 ORM概述 Object Relation Mapping 对象关系映射. 对象-关系映射(OBJECT/RELATIONALMAPPING,简称ORM),是随着面向对象的软件开发方法发展而产 ...

  3. Leetcode： 67. Add Binary

    二进制加法 https://discuss.leetcode.com/topic/33693/another-simple-java public String addBinary(String a, ...

  4. python+selenium UI自动化不同浏览器之间的切换

    class register(): ROBOT_LIBRARY_SCOPE = 'GLOBAL' def __init__(self): pass # m默认打开chrome def open_bro ...

  5. 手写一个admin 组件------STARK

    开一个新的项目,,建立一个stark 包, 在里面创建一个service包,在service 包里创建一个stark.py 文件, 配置好环境, makemigreations, migreate. ...

  6. hdu1058

    #include<iostream> #include<string> using namespace std; int const N = 4; int map[N] = { ...

  7. filter、map、reduce区别

    1.filter filter(function,sequence)-->list,tuple or string 1)       参数func是自定义的过滤函数,在函数func(item)中 ...

  8. C++基础之类和对象二

    (1)指向类的成员的指针分为指向数据成员的指针和指向成员函数的指针两种.一个类的对象用运算符“.*”来操作指向该类成员的指针,而一个指向类的对象的指针用运算符“->”来操作指向该类成员的指针.( ...

  9. Python 爬虫笔记

    urllib python3 与 python2 的urllib很不一样,之前urllib2的方法基本上都变成了python3里的urllib.request模块中 import urllib.req ...

  10. POJ1034 The dog task

    题目来源:http://poj.org/problem?id=1034 题目大意: 一个猎人在遛狗.猎人的路径由一些给定的点指定.狗跟随着猎人,要与主人同时到达那些指定的点.在丛林里有一些有趣的地方, ...