|  | 
 
| 
- k/ U- P' L6 u' v  n. K5 ~9 V
x
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!您需要 登录 才可以下载或查看,没有账号?注册 
  
 1 q3 J# h/ R4 _/ @/ _
 % D: G) w( _6 O# F4 l, M4 e  B9 }: s9 N% G+ t
 <!DOCTYPE html>
 . |) ?- j- p$ Q; N3 M) p<html lang="en">9 k9 R7 ^" ^5 P% U$ T
 <head>
 6 ~" d) \3 k4 P1 l4 W( O$ w+ j    <meta charset="UTF-8">
 & m) {# b) }4 ~8 ~    <title>to Do list</title>
 ( p" [' K& Q8 t2 a, I7 Z    <script src="./vue.js"></script>4 z; W3 w( f- x6 t- I( t+ p9 M
 </head>4 [2 K" z# F$ I3 W* ^
 <body>
 % h; X7 m- |& \# Q    <div id="root">% {) R+ N  }, X0 h7 G1 C  Z+ `
 <input type="text" v-model="inputVaule" />
 $ I" @' d- {% ^8 j$ V( u        <button @click="Submit">Submit</button>$ E; l) e0 h% }  f+ X- T7 F
 <ul>* b; P1 u6 u) e" N8 O4 t) |) T4 A
 <todo-item v-for="(item,index) in List" 0 e7 Z: z( T$ ?3 [4 M
 :key="index" 8 m$ t% @7 A+ u7 h0 \2 }
 :content="item" $ \  Q5 e; V3 d) p$ h
 :index="index"" m7 ?# o$ a! P8 `# Y
 @delete="handleDelete"" D! t; g3 ^" C3 D
 >
 ! P% o2 o0 x2 A% ?            </todo-item>6 V; i  f& F+ b
 </ul>0 G! _+ X  z' r9 `2 H  I+ f* S
 </div>! b4 Q; S; c3 w3 Z+ j& G
 <script>
 9 f$ x9 v. `% _% l' n9 G        Vue.component('todo-item', {
 : Q/ g0 |* O' Y% g, d4 \            props: ['content','index'],
 ! w4 E+ ?( ^# J6 E            template: '<li @click="deleteRow">{{content}}</li>',4 C9 W6 |3 Y. w( q
 methods: {, @+ W9 A' i  E, l
 deleteRow:function(){8 s8 [6 `% f: U' q3 n2 d
 this.$emit('delete',this.index);
 ; v- r# i" ^6 ^6 P. ?: k6 N                }
 ' p, Y( m. d: a" q' Z; X6 O            }. s. J" R6 t% x, z: c
 })! |- }" t' v$ J& C
 new Vue({& X5 H/ e8 x  V7 [* r* F3 n
 el: '#root',6 G. Z+ |9 ^7 _5 B# ?
 data: {
 3 M8 v) `6 R8 k+ \* D- x2 B6 |( K                inputVaule: '',
 3 @& A: y' p6 A- A- n8 T                List: []5 `% f3 L, q2 Q% Y
 },3 _+ Z+ H3 P8 b
 methods: {
 . m8 {( h& D( w                Submit: function () {4 j2 ?+ ]% }) t% {0 ^' o5 _
 if (this.inputVaule != '') {1 \4 f1 N2 E4 ?" U. m6 K/ D4 G8 L
 this.List.push(this.inputVaule);8 i5 k9 F. ~$ B4 V, ?
 }
 ; {3 q+ `# W. p8 `                    this.inputVaule = '';
 & ^! k. i2 z1 f; X' N                },2 L( C: ^7 f0 J3 \
 handleDelete: function(index) {; R5 e& C) s, k5 w
 this.List.splice(index,1);
 X: n6 ^( h7 J6 p6 f/ r  @                }
 $ }- q$ H& e% U  L, ]! s4 M1 n            }6 P0 K$ F; \- c) J* i  z; F5 s
 })/ ?$ J* x) b" y6 f
 </script>0 Y: o9 L+ p) _, i8 y% [: b
 </body>
 : W% R9 t$ a0 b# Y1 [</html>8 l* [2 b/ u7 ^+ T
 
 / U8 j3 S- V1 ]8 Q$ h+ |1 s) s3 P; |: I; S8 x9 r
 
 | 
 |