<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<div id="mydata">
<p v-for="(c,i) in city">----{{c}}----{{i}} </p>
<p v-for="(c,i) in cityList">{{c.name}}</p>
<!-- 这里是代表循环他的对象的键的名称和编号 -->
<p v-for="(v,k,i) in city1">{{v}}-------{{k}}-----{{i}}</p>
<!-- <p v-for="count in 10">{{count}}</p> -->
<!-- 代表要加上这个对象名才能访问 -->
<p v-for="(city,i) in cityList" :key="city.id">
{{city.id}}----------{{city.name}}
</p>
<!-- v-if是个Boolean值 -->
<!-- 区分v-if与v-show -->
<p v-if="flag">xxxxxxxxx</p>
<p v-show="false">show</p>
</div>
<script type="text/javascript" src="js/vue.js"> </script>
<script type="text/javascript">
var vm=new Vue({
el:"#mydata",
data:{
flag:false,
city:['北京','上海','广州'],
cityList:[
{name:"小明",age:'12'},
{name:"小花",age:'12'},
{name:"小刘",age:'12'},
{name:"小名",age:'12'},
],
city1:{id:"1",name:"小明"}
}
});
</script>
</body>
</html>
结果页面:
----北京----0
----上海----1
----广州----2
小明
小花
小刘
小名
1-------id-----0
小明-------name-----1
----------小明
----------小花
----------小刘
----------小名
xxxxxxx