Vue学习笔记——v-for

渣渣圆

于 2021-03-05 00:31:42 发布

阅读量179

点赞数

分类专栏：笔记文章标签： vue js html

本文链接：https://blog.youkuaiyun.com/weixin_44154577/article/details/114381420

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

v-for遍历

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<div id="app"> 
	<ul>
		<li v-for="(it,index) in arr">{{index+1}}:{{it}}</li>
	</ul>
	<h2 v-for="item in vegetables" :title="item.name">{{item.name}}</h2>
	<input type="button" value="添加" @click="add()" />
	<input type="button" value="删除" @click="remove()" />
	</div>
	<body>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					arr:["北京","上海","广州","深圳"],
					vegetables:[
						{name:"蛋炒饭"},
						{name:"芹菜炒牛肉"}
					]
				},
				methods:{
					add:function(){
						this.vegetables.push({name:"牛肉粉"});
					},
					remove:function(){
						this.vegetables.shift();
					}
				}
			})
		</script>
	</body>
</html>