- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script type="text/jscript" src="vue.js" charset="UTF-8">
- </script>
- </head>
- <body>
- <div id="todo-list-example">
- <form v-on:submit.prevent="addNewTodo">
- <label for="new-todo">
- Add a todo
- </label>
- <input v-model="newTodoText" id='new-todo' placeholder="E.g. Feed the cat"
- />
- <button>
- Add
- </button>
- </form>
- <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/jscript">
- vue.component('todo-item', {
- template: '<li> {{title}} <button v-on:click="$emit(\'remove\')">remove</button> </li>',
- props: ['title']
- }) new Vue({
- el: '#todo-list-example',
- data: {
- newTodoText: '',
- todos: [{
- id: 1,
- title: 'Do the dishes'
- },
- {
- id: 2,
- title: 'Do the Vue'
- }],
- newTodoId: 3
- },
- methods: {
- addNewTodo: function() {
- this.todos.push({
- id: this.newTodoId++,
- title: this.newTodoText
- }) this.newTodoText = ''
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3300798.html