|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ s& g! [; d/ }5 x0 L+ a! w _1 f5 D
7 p+ f; R$ |1 C- ?' P a; u+ ~/ S# ~4 A( d j' u |* j
2 P/ _; |2 a2 H& H: w" m; I
<!DOCTYPE html>
3 t( ~9 P* ^8 J6 A: E" m/ w! r<html lang="en">0 H9 o$ |" j! j( W( _) u
<head>
# D* f$ e8 E( W6 q; a <meta charset="UTF-8">
9 T# g" x, n% h& K <title>to Do list</title>
6 `0 y9 T6 f& t! e1 K0 K <script src="./vue.js"></script>
1 T* @1 K' C2 X, y# W# o0 ?</head>1 U6 o) K4 d+ }8 [7 A1 m& N: S: R
<body>: G( l/ ?8 N8 D# a7 G$ ]' ~
<div id="root">
6 S, c- w5 l; f0 E <input type="text" v-model="inputVaule" />
) D. v$ w" D' d <button @click="Submit">Submit</button>' o: y& c. A6 m3 j3 `( P0 C: @
<ul>: \$ l6 X# j) R n+ y2 d! }
<todo-item v-for="(item,index) in List" ; I7 E, A+ _7 n. q* Z! k3 b) @4 @
:key="index" 3 Y; ~% Z$ s' o6 v6 G/ `9 G
:content="item" 2 J j7 F) _* M6 j/ h2 ]1 |+ \$ F
:index="index"# V: T* g4 D4 x7 ?9 n2 m
@delete="handleDelete"
3 }4 B+ Q3 z3 I7 C4 Z. y; u# W% U >7 g; I) p. c( R. [7 i" o
</todo-item>2 V' w. W' {% w. A
</ul>
9 m1 m) T" o7 y# h' s& C4 P </div>
/ N8 M2 Z- {" L4 s <script>
2 K0 t- q$ U' b6 a C) T Vue.component('todo-item', {. V& N: _8 D5 X- }: N4 |7 [: ?
props: ['content','index'],- G2 e" d0 h$ _! y2 a4 h
template: '<li @click="deleteRow">{{content}}</li>',
/ {% y: F( Y: a/ n methods: {$ z' n7 T- ~% o! U, W% d
deleteRow:function(){% F) W. w$ m9 B0 N7 J4 ?
this.$emit('delete',this.index);: R; h7 N& a# j4 t& C6 B: T
}- x5 z3 `6 v, m4 r% j
}
. E) {+ r2 P( J" u8 }6 p5 g* L4 P& V })
" N0 Q: a- f) \. W/ K new Vue({
% i# j4 E( |% o7 _$ ^+ t7 Z el: '#root',
7 ?- E4 R3 y% N0 U( o9 Y data: {/ E* h' l7 C' Z3 t
inputVaule: '',
/ F" K7 _4 H4 i List: []
; K* n- ?1 T0 K& O2 y4 y },
/ z, }. G7 H- j, V methods: {& r: i8 _& N- T
Submit: function () {
# b$ {/ \2 U' Z$ ?- o# Q if (this.inputVaule != '') {
/ m) L4 _0 `: M- c# o* i6 O this.List.push(this.inputVaule);) U: _" v) M# |9 a7 ~
}
$ v( a8 I) N# T+ E( [ g& a this.inputVaule = '';: t0 |6 v! }9 E8 t0 q0 S
},
! Z# ~; w4 m" P handleDelete: function(index) {$ b5 }. n# E9 b* B! r
this.List.splice(index,1);
# F% k' h& T, d e! b( j# w }
+ ^: C9 i+ ~# b+ a2 Z }
# k1 @6 [- Q" ^6 E })' a( b- h/ k0 E8 @
</script>
. w) {; S" i# J3 H; P4 E+ I</body>/ [9 p! t+ F9 s: _% _7 n
</html>
% g& O& t% u6 h* L7 n& S8 Y: \- y" w6 n5 W
/ |5 ]" G/ p$ t+ G% d
|
|