<!-- 用v-for遍历循环数组字符串 -->
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<!-- 用v-for遍历循环数组对象 -->
<ul>
<li v-for="user in user">
name:{{user.name}}
age:{{user.age}}
</li>
</ul>
<!-- 取用户的下标 在里面可以再添加一个参数index-->
<ul>
<li v-for="(user,index) in user">
{{index}} name:{{user.name}}
age:{{user.age}}
</li>
</ul>
<!-- 如果用div循环的话,会有资源浪费的问题。会生成很多个无用的div -->
<div v-for="(user,index) in user">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</div>
<!-- 优化div,把无用的div去掉 template就不会被渲染出来-->
<template v-for="(user,index) in user">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</template>
-------------------------------------------------------------
<!-- 循环这个数组 -->
<template v-for="(user,index) in user">
<!-- 再循环数组里面的单个对象 -->
<div v-for="(val,key) in user">
<p>
{{key}} —— {{val}}
</p>
</div>
</template>
scritp里面:
data:{
characters:["a","b","c"],
user:[
{name:"lili",age:20},
{name:‘pipi‘,age:25},
{name:‘tete‘,age:18}
]
},
新版的vue里面v-for如果不提供key值得话加载慢,而且会报红,如何解决?
遍历得时候都给他一个key值,这样就没问题了。
<!-- 如果用div循环的话,会有资源浪费的问题。会生成很多个无用的div -->
<div v-for="(user,index) in user" :key="index">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</div>
好啦,今天大致就学了这么多,还有一个综合性的小练习。虽然学了这么点,但是很多在写例子的时候还是想不起来怎么,还有逻辑能力也有待提高。慢慢来,加油。