|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
( R+ g8 _2 r1 ^
6 D) |$ P. d& s) m4 `: M
+ W+ b V& Z/ h1 a1 V
; t# t" }" |/ r1 e0 J: C; M<template>2 }% B" ]0 W \$ k' v/ ^
<div id="App">. F4 A }4 B- Z/ D# C+ c* f
<input v-model="inputValue" />: N3 j, b8 t5 i* R+ n" ~8 p5 O
<button @click="submit">Submit</button>% C' Y) E6 z5 T5 n6 p& N
<ul>; @6 A) ~; l( E0 X& U$ P
<todoItem; v- k9 P/ @5 ]9 r4 ^
v-for="(item,index) in List"3 u( p ~1 T7 I. C' c# r: {2 h& b- U
:key="index", i4 c6 R, w3 n% G8 m
:content="item"! I3 R/ k2 H. v- M" }
:index="index"5 s1 l! h2 W9 D" p* r* O
@delete="handleDelete"6 d( Q+ W+ c9 ^$ c3 V/ `- y, T3 `
></todoItem>& [$ q% H' i, x) O! @# F
</ul>
; K! V! q+ f" ?! O# x </div>
( [9 k# L& j# n- Q( j" ^</template>- q& ` k. ~" N; Q9 T/ \- ~ X) `0 T
U9 d* J% U: u# ?6 f
<script>6 Z/ y0 Z- ?0 E2 Z1 y+ y+ E' G; P
import todoItem from "@/components/item.vue";
, _4 n) f- e& _7 d+ T
+ ` b* t, Z W' m& Uexport default {9 I) Z$ l. D; D) F9 F( P0 L
data: function() {+ n7 s& |% z. _% P
return {- e4 J! P2 r5 V4 w+ ]6 U
List: [],
M: k" }- r2 G inputValue: ""7 p0 E1 H. X4 \. K6 Q6 B0 A1 D
};5 s5 a* A$ X9 ]: M4 H
},. u* R _% _) V
components: {
: _) s* h1 p* K7 n- d- p' j" f todoItem4 [ g2 C% ^2 O8 ?
},
5 S0 d& a$ F: X: ` methods: {$ ]! m: Z' E( y
submit: function() {
* v6 a* w/ J3 o2 a7 _+ i# f if (this.inputValue != "") {
6 f. g$ v- F8 | this.List.push(this.inputValue);
: {' J: J. L9 _. Y) [/ A }$ [+ G: c: y H
this.inputValue = "";" D$ Z$ Y7 V, a9 _, c
},% }0 L/ [2 k& @1 \+ a7 ?
handleDelete: function(index) {/ J' L6 ]" `5 Z. ]
this.List.splice(index, 1);) O& ` d& Z0 ]3 x* P
}
3 e1 p" v8 @5 c; O0 m }4 i) @4 H5 X% A/ y
};! F; J* D: n# `6 f7 }" T# \2 K
</script>, A( m" c8 V8 h3 {- `6 L
1 |- F, ~- [7 u; k. w; q& p
! ?" m$ v% O7 J
1 H5 c: M$ U9 B3 ~( V s2 E' w
" N( s0 X3 }& D& w, Q! U6 b% `" h- |% s% F" ^% _" Q
% ?" n& [% e& N- O G# O; d! t
( X8 B, @( I* T# l5 V, O<template>
0 D& P( f' Z7 I <li @click="deleteItem">{{content}}</li>: _8 E0 _6 }% \
</template>
& D- A, W; m' z) \5 w( S) W1 B- a& h. y
<script>) c3 I) V' B- `, @4 R
export default {$ E8 S9 S% ?- o/ `2 W9 J3 F* j4 j
props: ["content", "index"],
. K9 Y' z; k& E1 l data: function() {. Y8 R- F& O g7 H, P8 j- @# S4 S, G; U
return {};) E3 D4 B! z7 |4 Z6 W; G
},9 W1 H' B" _+ s! ^" L
methods: {$ N' E- c) W9 p! W, {
deleteItem: function() {
4 D5 h! }( G3 F `3 L# O: u8 ~ this.$emit("delete", this.index);
- _6 l9 K- K% _4 N }2 w" n7 q( C' C/ G, q6 a
}
7 C8 x8 U' T. h; I};& N$ `# l+ u# _* Y5 x0 J8 y- l
</script>8 ^& E# n1 L2 S( v4 z( p! X! w
1 e9 n6 t7 S+ ]7 ~
) Y$ N6 O3 o5 Y( p8 n6 ^3 D& c5 `; ?+ m+ k3 v, K
5 |6 [( d7 C6 n" O; u& Z( E6 W |
|