vue.js实现简单todolist

最新推荐文章于 2024-08-05 08:02:44 发布

lucky111one

最新推荐文章于 2024-08-05 08:02:44 发布

阅读量970

点赞数 1

分类专栏： vue 文章标签： vue.js todolist

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>todo-list</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<div id="todo-list-example">
	  <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="代办事项" >
	  <ul>
	    <li is="todo-item"
	      v-for="(todo, index) in todos"
	      v-bind:key="todo.id"
	      v-bind:title="todo.title"
	      v-on:remove="todos.splice(index, 1)"></li>
	  </ul>
	</div>

	<script type="text/javascript">
		Vue.component('todo-item', {
		  template: '<li>{{ title }}<button v-on:click="$emit(\'remove\')">X</button></li>',
		  props: ['title']
		})
		new Vue({
		  el: '#todo-list-example',
		  data: {
		    newTodoText: '',
		    todos: [
		      {
		        id: 1,
		        title: '写作业',
		      },
		      {
		        id: 2,
		        title: '打扫卫生',
		      },
		      {
		        id: 3,
		        title: '读书'
		      }
		    ],
		    nextTodoId: 4
		  },
		  methods: {
		    addNewTodo: function () {
		      this.todos.push({
		        id: this.nextTodoId++,
		        title: this.newTodoText
		      })
		      this.newTodoText = ''
		    }
		  }
		})
	</script>
</html>