                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Vue.js
                        
                        /vue2.5入門(mén)

不用組件拆分的方式，完成todolist功能

不用組件拆分的方式，怎樣實(shí)現(xiàn)todolist功能？有哪位小伙伴試過(guò)嗎？分享一下代碼?

qq_慕設(shè)計(jì)4014402

2019-09-21

源自：vue2.5入門(mén) 3-4

關(guān)注問(wèn)題我要回答

878

操作

收起

2 回答

dzlong
2020-05-30

<!DOCTYPE?html><html><head>	<meta?charset="utf-8">	<title>todo</title>	<script?type="text/javascript"?src="./vue.js"></script></head><body>	<div?id="app">		<input?type="text"?v-model="event">		<button?@click="submit">提交</button>		<!--?不使用組件?-->		<ul>			<li?v-for="(item,?index)?in?list"?:key="index"?:data-id="index"?@click="del">{{item}}</li>?		</ul>					<!--?使用全局組件?-->		<!--?<ul>			<todo-item-qj?v-for="(item,?index)?in?list"?				:key="index"?				:content="item"?				:prex="index"				@delete="handleDelete"				>			</todo-item-qj>		</ul>?-->	</div>	<script?type="text/javascript">		//?全局組件		Vue.component('todo-item-qj',?{			props:?['content',?'prex'],			template:?'<li?@click="handleClick">{{prex}}?-?{{content}}</li>',			methods:?{				handleClick:?function(){					this.$emit('delete',?this.prex);				}			}		});		//?局部組件		var?todoItem?=?{			props:?['content',?'prex'],			template:?'<li>{{prex}}?-?{{content}}</li>',		};		var?app?=?new?Vue({			el:?'#app',			data:?{				event:?'',				list:?[],			},			methods:{				submit:?function(){					if(!this.event.length)					{						alert('輸入值');					}					this.list.push(this.event);					this.event?=?'';				},				del:?function(event){					//?console.log(event.target.dataset.id);					let?prex?=?event.target.dataset.id;					this.list.splice(prex,?1);				},				handleDelete:?function(prex)?{					//?alert(prex);					this.list.splice(prex,?1);				},			}		});	</script></body></html>