04 第四篇 vue 使用组件方式实现TodoList 点击后删除功能

技术~子云

已于 2022-10-22 19:40:28 修改

阅读量147

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-10-21 08:47:37 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127438877

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

第四篇 vue 使用组件方式实现TodoList 点击后删除功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="./vue.js"></script>
</head>
<body>
    
	<div id="app">
		<!--双向绑定v-model-->
		<input type="text" v-model="inputValue">
		<!--绑定click事件handleBtnClick-->
		<button @click="handleBtnClick">提交</button>
		<ul>
			<!--循环遍历列表list中的每一个值,并赋值给item  监听@delete 事件handleItemDelete-->
			<todo-Item  :content="item"
						:index="index"
			 			v-for="(item,index) in list"  @delete="handleItemDelete">
			</todo-Item>
			
		</ul>
	</div>
	<script type="text/javascript">
		//全局组件
		// Vue.component("TodoItem",{
		// 			props:['content'],
		// 			template:"<li>{{content}}</li>"
		// })

		var TodoItem ={
			props:['content','index'],
			template:"<li @click='handleItemClick'>{{content}}</li>",
			methods:{
				handleItemClick:function(){
					// 子组件触发父组件的delete事件
					this.$emit("delete",this.index);
				}
			}
		}
		var app = new Vue({
			el:"#app",
			//注册局部组件
			components:{
				TodoItem:TodoItem  
			},
			data:{
				list:[],
				inputValue:""
			},
			methods:{
				handleBtnClick:function(){
					//alert(this.inputValue)
					this.list.push(this.inputValue),
					this.inputValue=''
				},
				//父组件的事件处理
				handleItemDelete:function(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>