vue2基本语法之v-for与v-show

<!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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值