v-for
我们可以用v-for
指令基于一个数值来渲染一个列表
v-for
指令需要使用item in items
形式的特殊语法,其中items
是源数据数值,而item
则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<h3>明星列表</h3>
<ul>
<li v-for="item in stars">
{{item}}
</li>
</ul>
<h3>学生列表</h3>
<ul>
<li v-for="item in students">
<h4>{{item.studentName}}</h4>
<p>年龄:{{item.age}}-----学校:{{item.school}}</p>
</li>
</ul>
<h3>学生列表(带索引值)</h3>
<ul>
<li v-for="item,key in students">
<h4>索引值:{{key+1}}--{{item.studentName}}</h4>
<p>年龄:{{item.age}}-----学校:{{item.school}}</p>
</li>
</ul>
<h3>学生循环对象</h3><!-- 循环学生的第一个对象 -->
<ul>
<li v-for="item,key in students[0]">key:{{key}}---value:{{item}}</li>
</ul>
<h3>选取年龄为偶数的学生(条件渲染+列表渲染)</h3>
<ul>
<li v-for="item,index in students" v-if="item.age%2==0" :key="index">
<h4>索引值:{{index+1}}--{{item.studentName}}</h4>
<p>年龄:{{item.age}}-----学校:{{item.school}}</p>
</li>
</ul>
/* 通过索引值我们可以知道,是先循环在判断 ::key="index"可以起一种标识的作用,供给vue使用,
如果key后面绑定的是属性,就一定要加上:,如果后面绑定的是字符串,则不需要:*/
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
stars:['蔡徐坤','易烊千玺','王一博','张艺兴'],
students:[
{
studentName:"小明",
age:16,
school:"清华"
},
{
studentName:"小花",
age:17,
school:"复旦"
},
{
studentName:"小白",
age:20,
school:"浙大"
},
{
studentName:"小白",
age:21,
school:"浙大"
},
],
}
})
</script>
</body>
</html>
显示效果: