|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 ~7 t+ f) X+ s$ i! L
9 S# X4 E; B# z: e6 I3 |- g+ _/ v# f3 X# ~# }
3 i2 K$ z) h+ n3 p<template>. W+ T5 m2 B; l4 G" M$ \2 y+ h
<div id="App">
6 N' F4 Z2 ^3 `) b( S+ @ <input v-model="inputValue" />
* ~' V9 B- [' R3 K1 ? <button @click="submit">Submit</button>
/ u" u. i0 x% r# a! a; k <ul>
& S. f$ y, Z M' e7 b' R <todoItem
8 A! W) j- y# f6 D0 ?/ ?& J v-for="(item,index) in List"+ d9 d$ |; ]$ G2 M3 X/ \% B& t
:key="index"5 u$ n9 F$ Q7 L! k2 X6 w
:content="item"
) m% Z. Y/ O. |' V :index="index"
7 v% \5 R- U: V- W9 |5 T5 G$ r @delete="handleDelete"( j8 L' N |7 ]; N# g; g( F2 S
></todoItem>
/ y2 X0 Q, a Q! D9 K </ul>
: x/ Q/ a; _, e X( k2 x2 E </div>
& i$ H& y" y5 W. Q( I$ w</template>
7 d4 L) S, t/ K$ `( R. H# ~
4 @1 C. s9 F3 w9 i6 m1 r3 m) O; q4 I<script>
" _5 H3 [5 v: R: S5 j& gimport todoItem from "@/components/item.vue";" F3 E6 G" r/ B8 k7 }( e. d
& t$ {5 b7 I/ Iexport default {
( m2 W) k" ?& E: y; h, \: M4 z3 ? data: function() {8 L/ ^" b7 \5 W+ B- `
return {3 \+ r( R2 a9 i6 V3 `
List: [],5 r4 [* [# _6 L8 D
inputValue: ""+ u9 q" F; N( R3 Q) @; ^( q" v
};( G$ F% t j7 Z7 \( @6 D
},5 l; i) K9 P d' [7 T
components: {4 D! W1 c7 S4 @
todoItem3 D5 n l l1 h. b# V
},% C2 \. S# Y+ v% V
methods: {* Z- l, ?- Z1 @% b# ^
submit: function() {; A3 w& X0 K7 S2 k2 ?
if (this.inputValue != "") {
F2 g& C5 h6 k& } this.List.push(this.inputValue);- q6 L# q- w1 [$ m4 S
}
" f- J4 `0 K5 C( P$ f- E" L this.inputValue = "";; k7 G1 M4 v" ~4 m
},8 e& H. N$ p: I& S- h
handleDelete: function(index) {( V; x7 Q( [2 W4 w6 G
this.List.splice(index, 1);: t8 V3 f5 [* X6 s$ T
}& v8 e, e4 E9 ?( _
}% u; P( V, A- k: v; M6 w' J
};
/ s9 s$ @ j3 F7 B- O# @% ^: k' O3 x</script>
+ m6 _2 A" _/ L2 p: \. P1 e
: }- J/ m! k0 L% z9 r I" O
; l, Y$ |$ c5 B5 P. Y3 v, n+ s p9 J9 H7 h, x* d6 h' Y/ B. C7 |# I
9 C, ?- y: k& U% c* }8 h% c
+ o! K. K( B1 A0 f: P$ r6 N3 y7 x; _' T9 i/ a! x% \
8 s: | f* X5 b" G, s3 k
<template>4 V8 {% ?" {+ ?
<li @click="deleteItem">{{content}}</li>
3 L; @4 v2 E l5 U</template>% } l' K s) A* Q2 g
/ D M% F" C% }, L3 B, G<script>' s) B2 U9 }2 K. w5 N4 x
export default {
4 M S' O7 [2 Z2 M2 Y' }) b props: ["content", "index"],
* p, n) ~0 Z) u* g+ o- l3 [ data: function() {" V9 q0 ~6 g/ S8 M
return {};9 v, d; |; N/ x' G) j
},& _& \: n1 z5 Q
methods: {
3 b( ~( v f" i4 d4 E; J deleteItem: function() {$ h5 C& G0 `/ O+ g {( @
this.$emit("delete", this.index); ?8 F3 Q4 l9 f2 x) l7 A7 R
}! k: C% |0 l: q! B7 h, q( u
}6 [4 m4 B1 {' w; G; E
};
& H+ R) h" Z$ M</script>
r( y; F/ `; e4 R% B1 G9 E/ q9 l0 U
+ o5 f+ e. ~ r; s' T' @
7 G9 o2 x' m4 v |' s
3 `6 Y" Y- h% U/ A7 B |
|