|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
1 [* u, l$ v* G9 _' R0 V) Q2 T$ g
. f) E: \" s5 D! {) p6 k6 G. o% Q0 K
! {' v T% P6 M( ?& w4 ^2 _( U<template>0 m# b1 A8 E3 J* ]3 k
<div id="App">% y5 Y' a1 a4 f8 j: Y Z: w
<input v-model="inputValue" />
+ U7 `! `( S2 K$ Y8 }2 Y6 G <button @click="submit">Submit</button>
, t; c1 H h8 h- S, Z- V <ul>- b6 q8 n9 V" Q6 ^1 l6 N- y9 F
<todoItem
$ @$ M# z" ]; p. n6 t3 ~' Z v-for="(item,index) in List"
1 R3 w* L2 z9 y0 m2 r: ]- } :key="index"2 W) p* a3 d! W7 }1 r X8 _& |
:content="item"* p1 Q! a j* _3 r
:index="index"* C7 W1 u3 ]4 m! G
@delete="handleDelete"
1 g# \. z1 ^! G7 q7 m9 I6 U) R0 E ></todoItem>" W. M) \8 V. a9 f7 ?) k1 Y& S
</ul>
: g0 t D% H# r( S6 \( J4 C; j4 Y </div>0 q' v/ c( p9 I8 h9 v7 b% P
</template>
; J4 ^9 h2 |/ l3 D! S2 v. y/ ?+ B1 x4 R# N6 ~4 J
<script>
* |( e8 D$ q, \' pimport todoItem from "@/components/item.vue";$ [" E$ T) f- y3 E9 U, V4 N4 b
" c# ~; O5 r9 r! D& ]export default {
+ S7 L% [/ m2 v data: function() {
/ s& T2 R; c- J7 P6 x% N! s return {/ L8 P- N6 C! m+ n0 v( r
List: [],
% I- v: q% a1 t inputValue: "" h" r; ?. q4 M, W8 M/ v5 _
};4 s3 w' ~; [1 B- V- x* k8 ]
},1 s( t6 g! ], \: v" A* T& I
components: {4 D+ B( V, [" s
todoItem
8 a( ]! G; T% a },, `, ?$ Y2 \& ]2 R# O) h" E6 W
methods: {( g, I" P- `/ L5 F( n: E
submit: function() {
: R" C4 ?9 i8 ?7 T v$ P E Q; B9 S/ x if (this.inputValue != "") {
+ Q- @/ y8 p/ a0 H1 m this.List.push(this.inputValue);
- {+ n( A, G% Y2 K } P' b8 V0 W# t/ L6 Q _
this.inputValue = "";
1 R9 ?" A1 v- y7 V5 X$ G+ p8 ]# a },$ j9 s3 Y0 p. a/ o M
handleDelete: function(index) {
& ^ }( c. K) b0 W3 Z this.List.splice(index, 1);; t+ ~7 T! ~+ w: V9 v! x/ E
}. T# i- ^+ x5 [, [: l
}" q: o% W/ X/ d2 x& a2 X G4 d5 z
};
) Y- r* T4 d6 o. u, z) |</script>9 Z4 I( C7 S. _: Z
X1 ?& Z4 u& R) j6 X
/ ^1 h* T* \+ B
+ ]9 i5 w7 A: T7 e( F: l4 e
. V: G# N4 {) h& Q1 L+ r9 a8 V# ]9 l* r; h1 k6 u6 y
6 c, Q( S F/ I0 |" g- }2 [
) [% D$ Z% i: }( p3 s: N; _8 h<template>
5 ]- K$ J4 D1 R8 y <li @click="deleteItem">{{content}}</li>- n7 G+ i2 K3 ~" W
</template>
7 \8 U ^2 S, U0 x% y2 y
$ ] G r h3 q2 ^ C. C3 R<script>$ N: V d# m1 z, c. O2 [
export default {
) ?3 s( d. N7 Q$ N% X( G( M; S props: ["content", "index"],& |7 @6 U% y; ^4 ~ i" V3 m
data: function() {% Y8 M* r C" d/ u
return {};
/ W% }2 p8 e b8 J1 { },) w [$ x. }5 |) y' q
methods: {/ [: H0 @. R* k' l' K
deleteItem: function() {
' U X1 J" `( B. f1 m& Z8 E& p { this.$emit("delete", this.index);: I2 |3 i7 y9 n1 g
}
9 C i. i T& I$ i$ w" `8 ] }. C! {8 ^% z% M6 n
};
4 S5 b5 w9 R( Y8 D+ \1 v" d: X$ h</script>
+ L& o d# z. d2 c0 i: A. h t* g4 _( x8 c0 u8 B1 o' a
B# m/ z$ g+ s0 E$ i( ]
- e3 ~7 D" M" L: u- w! W+ X. W- H* F8 ^" G- X8 |) W
|
|