1_2_添加和移除

原创于 2020-03-13 12:14:59 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

VueJS快速入门专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加和移除数据</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>	
		<div id="AddAndRemove">
			<input type="button" value="添加" @click="add" />
			<input type="button" value="减少" @click="remove" />
			<li v-for="ms in message">
				{{ ms }}
			</li>
		</div>
		<script>
			var i = 6;//随便定义的一个数据
			var app = new Vue({
				el:"#AddAndRemove",
				data:{
					message:[1,2,3,4,5]
				},
				methods:{
					add:function(){
						this.message.push(i++);//往数组里添加数据
					},
					remove:function(){
						this.message.shift();//移除数组的第一个数据
					}
				}
			})
		</script>
	</body>
</html>