Vue 实现todolist的添加删除功能

直接上代码

vm.$emit( eventName, […args] ) 触发当前实例上的事件 可选附加参数 传给监听器回调。

<style>
#app{ margin: 100px; }
#app>input, #app>button, ul li button{ border: none; outline: none; box-shadow: 0 1px 6px #dedede; background: #fff; }
#app>input:focus, #app>button:hover, ul li button:hover{ box-shadow: 0 2px 4px #ccc; }
#app>input{ padding: 6px 10px; width: 200px; }
#app>button{ padding: 6px 10px; height: 30px; cursor: pointer; }
ul{ padding: 0; }
ul li{ width: 280px; list-style: none; margin-top: 10px; }
ul li button{ float: right; width: 30px; cursor: pointer; }
</style>
<div id="app">
<input v-model="txt" type="text" @keyup.enter="handleSubmit">
<button @click="handleSubmit">submit</button>
<ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li>{{index}}. {{content}} <button @click="handleClick">x</button></li>',
methods: {
handleClick () {
this.$emit('delete', this.index)
}
}
})
new Vue({
el: '#app',
data: {
txt: '',
list: []
},
methods: {
handleSubmit () {
if(!this.txt) return;
this.list.push(this.txt);
this.txt = '';
},
handleDelete (index) {
this.list.splice(index, 1)
}
}
})
</script>