vue v-for 组件传值 enter传值

最新推荐文章于 2024-06-05 16:26:04 发布

weixin_30585437

最新推荐文章于 2024-06-05 16:26:04 发布

阅读量199

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1032473245jing/p/9006610.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         
 9         <div id="app">
10             <!--v-on:keyup.enter="addNewTodo"简写成@keyup.enter="addNewTodo"-->
11             <input type="text" 
12                 v-model="newTodoText"
13 
14                 v-on:keyup.enter="addNewTodo"
15                 placeholder="add a todo"
16                 />
17             <ul>
18                 <li 
19                     is="todo-item"
20                     v-for="(todo,index) in todos"    
21                     :key="todo.id"
22                     :title="todo.title"
23                     @remove="todos.splice(index, 1)"
24                     ></li>
25             </ul>
26         </div>
27         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
28         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
29         <script type="text/javascript">
30             Vue.component('todo-item',{
31                 template: '\
32                             <li>\
33                               {{ title }}\
34                               <button @click="$emit(\'remove\')">X</button>\
35                             </li>\
36                           ',
37                 props:['title']
38             })
39             new Vue({
40                 el:'#app',
41                 data: {
42                     todos: [
43                         {
44                             id: 1,
45                             title: 'Do the dishes',
46                         },
47                         {
48                             id: 2,
49                             title: 'Take out the trash',
50                         },
51                         {
52                             id: 3,
53                             title: 'Mow the lawn'
54                         }
55                     ],
56                     newTodoText:'',
57                     nextTodoId: 4
58                 },
59                 methods: {
60                     addNewTodo: function () {
61                       this.todos.push({
62                         id: this.nextTodoId++,
63                         title: this.newTodoText
64                       })
65                       this.newTodoText = ''
66                     }
67                 }
68             })
69         </script>
70     </body>
71 </html>