|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
1 {+ r# o0 h$ }4 G3 V+ x: _
$ F! ?9 n0 x. E1 m5 `) w4 t! }8 ^# _2 V4 X" h6 t+ {
: I' m" t" `% I6 v$ u<template>6 C6 y: S q9 j
<div id="App">
2 U& p: \2 S* j8 F <input v-model="inputValue" />0 `% V, a6 _' S* J* [' L- }+ w
<button @click="submit">Submit</button>
# v0 q+ k7 c& v <ul>( e! `- q0 i5 H* k
<todoItem
/ h* q: x& B! a- C2 _, D v-for="(item,index) in List"% \6 z, R/ A g6 [& Y' o" Z7 }
:key="index"
) S6 Y8 F ~% D1 W3 [2 p :content="item"4 w/ o f+ ]$ k0 W
:index="index"
8 v6 X2 H( Q$ I2 }! \ @delete="handleDelete"9 }7 i: E* [$ A
></todoItem>' u9 |& ]9 S0 N2 l, A- j) J
</ul>6 c' ?9 q8 G3 |$ C1 u, z2 Z: a
</div> i. h: e8 c/ q7 I* m* Q
</template>
* e) s. Y6 h4 k$ c
- o: ~3 R: X2 _8 c<script>1 W, L' A; e) U% g! [' v% u0 `
import todoItem from "@/components/item.vue";
/ F9 G/ ]( @- @9 W. Z/ w2 ~7 e- f* l
w0 w7 T. W; V8 O5 ?4 J- Gexport default {2 m. B7 J& x) K0 J
data: function() {# T+ D$ M1 K4 z5 n0 G( N M
return {6 f, V$ A" I! Q; P
List: [],
" ~3 N# X3 {* W- U inputValue: ""1 D Q- F# O. T4 E
};
: U8 V" M7 O& `, U% h },
3 i7 M0 X- Y, v! P5 l2 U components: {& V, j3 j( Y& h* g3 v( r
todoItem' P1 B' I; a: X A( k4 g
},6 S' T& L$ ^- ~7 w- ?
methods: {
' q( r: i: Z' I) Y submit: function() {
( d [4 p: y+ l if (this.inputValue != "") {
1 f) d$ x8 c% Z this.List.push(this.inputValue);
* P5 ^) o& v1 y, p( f* A* b }
* U, r* V5 k5 T this.inputValue = "";6 J( c7 Z" U7 E
},2 S- M8 a% x; N% K0 ~
handleDelete: function(index) {% J5 w7 d: p4 W) B) ~9 }" T
this.List.splice(index, 1);
1 I; @$ B% i% V0 ^/ P+ T8 D4 Z }/ l6 I: H; @; i
}
x$ k! g/ L3 E" E};
# j0 @8 }- t" \$ I% g& _6 \- V</script>
6 U" M) v/ A1 T( C! v+ N
) v$ `, }$ q ^2 F6 B% k# t
% E7 ~* z- U5 i' h6 q+ V' s( e8 E. J8 I# O
0 G5 s3 }8 C) i7 Q# i4 [2 Q: X8 f6 n' o7 E, o3 Y6 O
8 W) [2 C* I: u6 r( b0 Z' j5 D% S+ X& A5 R. o- s
<template>" c4 m5 b% K. ^5 V! r. ?
<li @click="deleteItem">{{content}}</li>1 }2 ^% b+ j( P* j& p
</template>/ B2 C; {5 ~$ T. X
' D& p: H) Z1 F& i( k E" M! q
<script>6 Y& N/ c+ x+ J; H( [2 w
export default {# `1 @' g+ o! W1 X( ^8 ? e
props: ["content", "index"],7 k1 u2 a. w& z- Z4 B
data: function() {
/ y& U! j. X) }) T, K5 s8 [ return {};" D( Y8 v/ X% Z' b7 y
},. X' @, {% w% v, l- p/ ]! ^
methods: {
. n( r" [7 X) U1 K7 J deleteItem: function() {
1 Y) K& h1 y0 d |4 ?8 j/ u7 R this.$emit("delete", this.index);
! y7 c4 Q+ b `) u3 l3 y9 c7 e }
6 ]+ \! h; a1 T- v }% m9 N0 D @6 B1 U
};2 `$ }$ \$ K' p- o. w0 W
</script>
4 j& h5 Y( y0 I% \1 M6 U9 K: n: b4 R. e' ?" V
: b$ w7 k8 {( e
2 e4 P1 z2 L6 Q* H1 Q: z
$ _8 J _( x# C3 @ v# ~( E; ` |
|