vue动态添加数据，并实现点击删除

最新推荐文章于 2024-05-24 11:30:21 发布

原创

最新推荐文章于 2024-05-24 11:30:21 发布 · 7.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<!-- 
		注意; 每一个vue实例都是一个组件 每一个组件也都是一个vue实例


		父子组件之间带的通信：
			父组件传递数据给子组件： 通过属性绑定，并且子组件需要使用props接收
			子组件给父组件传递数据： 必须基于发布订阅模式，子组件需要先向外发布，父组件负责监听
	 -->
	<div id="app">
		<div>
			<input type="text" v-model="inputValue">
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<!--
				 使用全局组件 
				父组件给子组件传递参数的过程：
					1、在父组件的子组件上使用属性绑定 绑定需要传递的参数
					2、在子组件中使用props接受父组件的参数

			-->
			<todo-item 
				v-for='(item,index) of list' 
				:key="index"
				:item="item"
				:index="index"
				@delete="deleteItem">  
				
			</todo-item>
		</ul>

	</div>
	<script type="text/javascript">
		
		//全局组件注册
		Vue.component('todo-item',{
			//子组件要先接受父组件的参数
			props:['item'