专栏首页eadelavuejs基础-v-for用法

vuejs基础-v-for用法

遍历数组、数组对象、对象、数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<p v-for="(item,ii) in arr">数据中标号第{{ii}}个的值是{{item}}</p>
			<p v-for="(item2,ii2) in list">id:{{item2.id}},name:{{item2.name}},序号是{{ii2}}</p>
			<p v-for="(val,key,ii3) in user">key:{{key}},value是{{val}},序号是{{ii3}}</p>
			<p v-for="count in 10">这是第{{count}}次遍历</p>
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{
				arr : [1,2,2,4,3,5],
				list :[
					{id:1,name:"name1"},
					{id:2,name:"name2"},
					{id:3,name:"name3"},
					{id:4,name:"name4"}
				],
				user : {
					id : "10",
					name : "zhang",
					age : 22
				}
			},
			methods:{}
		});
	</script>
</html>

数字遍历从1开始

v-for循环的时候,key属性只能使用number获取string

key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值

在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须使用v-for的同时,指定唯一的字符串/数字类型:key值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			id:<input type="text" v-model="id"/>    姓名:<input type="text"  v-model="name"/><input type="button" value="添加" @click="add" />
		</hr>
		<div>
			<p v-for="item in list" :key="item.id"><input type="checkbox" name="" id="" value="" />{{item.id}}----{{item.name}}</p></br>
		</div>
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{
				id:"",
				name:"",
				list :[
					{id:1,name:"王五"},
					{id:2,name:"张三"},
					{id:3,name:"李四"}
				]
			},
			methods:{
				add(){
					//this.list.push({id:this.id,name:this.name});
					this.list.unshift({id:this.id,name:this.name});
				}
				
			}
		});
	</script>
</html>

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1w2zuib4s8tz5

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • docker--docker 容器操作

    我们可以在创建容器的时候,将宿主机的目录与容器内的目录进行映射,这样我们就可 以通过修改宿主机某个目录的文件从而去影响容器。 创建容器 添加-v参数 后边为 宿...

    eadela
  • HTML5-拖拽

    eadela
  • oracle--表分区、分区索引

    eadela
  • V-for玩不明白Vue基本废了

    本文编辑 : Jack 风 编程工具 : Vscode 阅读时长 : 5分钟

    DataScience
  • MyBatis 简单使用说明(2)

    先简单对MyBatis的使用做一个简要说明,后边会针对MyBatis几个核心原理做重点说明。

    兜兜毛毛
  • 初入Mybatis:简介及配置

    org.apache.ibatis.binding.BindingException: Type interface com.rui.dao.UserDao i...

    乐心湖
  • MyBatis魔法堂:即学即用篇

    一、前言                                          本篇内容以理解MyBatis的基本用法和快速在项目中实践为目的,...

    ^_^肥仔John
  • MyBatis入门教程(MyBatis3.2)

    1.从配置文件(通常是XML配置文件中)得到 sessionfactory. 2. 由sessionfactory 产生 session 3. 在session...

    SmileNicky
  • appium+python自动化49-yaml管理定位元素

    如何高效管理定位元素,这个是很有学问的问题,也是面试必问的[以下纯属个人观点,勿喷!]。

    上海-悠悠
  • flume应该思考的问题

    问题导读 1.flume的配置你是如何理解的? 2.flume与kafka整合,kafka可以做哪些组件? 3.flume与kafka的区别是什么? flu...

    用户1410343

扫码关注云+社区

领取腾讯云代金券