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>

巴特西

Vue 实现todolist的添加删除功能

直接上代码

最新文章

热门文章