不用组件拆分的方式，完成todolist功能
来源：3-4 实现todolist的删除功能
qq_慕设计4014402
2019-09-21 14:44
不用组件拆分的方式，怎样实现todolist功能？有哪位小伙伴试过吗？分享一下代码?
写回答
关注
2回答
-
- dzlong
- 2020-05-30 22:48:00
<!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> -
- 慕运维8121226
- 2019-09-22 15:58:52
vue2.5入门
快速理解Vue编程理念上手Vue2.0开发。
146820 学习 · 657 问题
相似问题