Vue2.0列表渲染之基础列表

js里面一旦要有顺序，就得用一个数组([])去存
数组里面每一个人都是对象({})
每一个人都要有唯一的标识(id)

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            persons: [
                {id: '001',name:'张三',age: 18},
                {id: '002',name:'李四',age: 19},
                {id: '003',name:'王五',age: 20},
            ]
        }
    }
})

<ul>
    <li v-for="">姓名-年龄</li>
</ul>

你想生成多个谁，就在谁身上用上一个v-for, 具体的语法:

<ul>
    <li v-for="person in persons">姓名-年龄</li>
</ul>

persons:指的是data中的persons数据
person:可以理解为一个形参(可以随便定义)

persons:里面的长度是几，就给你生成几个元素(这里是li)

想用person得用插值语法({{}}),插值语法中的属性来自与:(1)是来自与正常的属性;(2)可能来自于我根本没有配置的计算属性;(3)可能来自于v-for="person in persons"的形参
可以这么来写

<li v-for="p in persons">
    {{p.name}}-{{p.age}}
</li>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            persons: [
                {id: '001',name:'张三',age: 18},
                {id: '002',name:'李四',age: 19},
                {id: '003',name:'王五',age: 20},
            ]
        }
    }
})

key

还有细节上的问题
1.这个遍历少了一个特别特别重要的标签属性，它的名字叫做key
vue官网key的解释
这里只是key的相关配置

遍历数组(用的最多)

<li v-for="p in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

这样写让每一个li都有了唯一标识

在vue或React当中，俩框架都是，只要你用v-for(遍历)这种方式去生成多个同样结构的数据，你必须给每个结构取一个名字(或者说打个标识) 这个:key就是每个节点的标识

key的还有一种写法

<li v-for="p in persons" >
    {{p.name}}-{{p.age}}
</li>

p这块可以接收俩个形参

<li v-for="(a,b,c) in persons" >
    {{a}}----{{b}}---{{c}}
</li>

html显示:

{ "id": "001", "name": "张三", "age": 18 }----0---
{ "id": "002", "name": "李四", "age": 19 }----1---
{ "id": "003", "name": "王五", "age": 20 }----2---

a:是item,你遍历的每一项
b:是index索引值
c:undefined收不到c

第一种写法:

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

第二种写法:

<li v-for="(p,index) in persons" :key="index">
    {{p.name}}-{{p.age}}
</li>

还有一个细节是:in可以换成of

<li v-for="(p,index) of persons" :key="index">
    {{p.name}}-{{p.age}}
</li>

v-for也可以遍历对象类型

<li v-for="(a,b) in car">
    {{a}}---{{b}}
</li>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            car:{
                name: '丰田',
                price: '30w',
                color: '黑色'
            }
        }
    }
})

丰田---name
30w---price
黑色---color

所谓的a就是value
所谓的b就是key

<li v-for="(value,k) in car" :key="k">
    {{k}}-{{value}}
</li>

还可以遍历字符串(但是用的不多)

<h2>测试遍历字符串</h2>
<ul>
    <li v-for="(a,b) in str">
        {{a}}---{{b}}
    </li>
</ul>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            str: 'Hello'
        }
    }
})

H---0
e---1
l---2
l---3
o---4

a:就是字符串里的每一个字符
b:就是一个自然数的一个统计(也可以说是索引值)

遍历指定次数(特别特别少见)

<h2>测试遍历指定次数</h2>
<ul>
    <li v-for="(a,b) of 5">
        {{a}}---{{b}}
    </li>
</ul>

1---0
2---1
3---2
4---3
5---4

所以可以这么写:

<h2>测试遍历指定次数</h2>
<ul>
    <li v-for="(number,index) of 5" :key="index">
        {{index}}---{{number}}
    </li>
</ul>

总结

v-for指令
1.用于展示列表数据
2.yu语法:v-for="(item,index) in xxx" :key=“yyy”(key是唯一值)
3.可遍历:数组、对象、字符串(用的少)、指定次数(用的很少)