|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
6 f+ I7 {: p2 W) q Y& L, X
5 ]. v( P* o: r" u2 O- D5 s" e+ W9 Y, C1 H2 f Z& ^) r; j' H8 G
. Y* B3 K7 H8 _/ \ N- ^ k6 H
<template>/ t0 P, q( f% m3 d Y; @% ~
<div id="App">" K" l: K3 Y: m7 L
<input v-model="inputValue" />
+ ?7 R7 g- Y4 P/ N2 a$ i <button @click="submit">Submit</button>
' d* _. I$ z/ K <ul>" o; _: ]+ h4 n& S' Y
<todoItem
0 a9 d" Y( p/ c( m( c v-for="(item,index) in List"
/ b8 D( I. e2 W :key="index"% W) C) g9 \& E) E" j
:content="item"
- Z5 p) b$ w% { :index="index"+ u+ k0 G" F4 ]# ] H
@delete="handleDelete"9 g$ r- N' E) \* p. ~. J
></todoItem>4 b6 a+ w! y$ ]2 M5 L
</ul>1 ~: C0 u, y3 n/ _! D8 r
</div>
- P( }1 r- j) W0 f/ h- ~+ k</template>5 a* [% O7 y E
5 l0 Z. _# v$ D5 e/ T% J4 ~7 X
<script>
+ b. z5 X% K0 }- Uimport todoItem from "@/components/item.vue";
# N/ X8 P" \% z2 ^5 }" `4 e* Q; z: s
2 n e" n2 e, E: n: B8 n9 Vexport default {7 a! Y( m! I1 q
data: function() {' e/ q, F; G3 c4 `8 S
return {& M6 ^* q4 X- Q
List: [],
! m0 D6 G! G v2 h( a$ ^' I) Q inputValue: ""
. x& L n- c; I, o3 o1 N };
( c8 d3 R' s. ^( S0 Z },1 T% Z8 y# s; {/ j/ V! o8 H6 `1 ?, W
components: {+ j/ J* ]: N( r4 F3 a1 u5 g
todoItem. o* b y) P- V7 h
},
# R; o! u( k! y+ T& u" g' d methods: {* I" c2 X( A- I5 o& [
submit: function() {: r- {7 c3 j/ ]) I6 U! X/ Q
if (this.inputValue != "") {
* y0 R+ i) S1 [! ^5 w+ V this.List.push(this.inputValue);
* H/ |# H% p* N4 X" J2 u3 G }
% m) J+ t" K' |1 d. A# N this.inputValue = "";/ t+ d3 K& A* B1 V! M
},
3 b2 z! y( r2 t2 k9 k4 J handleDelete: function(index) {7 F5 [/ O' a- M1 Q/ K" B
this.List.splice(index, 1);
) M, h; b, f2 W# C, W$ x" T }
. }5 O5 n8 ]% l h }
' }! ~. w5 r q# f/ ^};
4 c4 \0 S: ~! K S: p- H, q' U</script>
- p% M- X; o/ _7 ?; x: j7 g; a* u9 K" T/ S) `) e) ?
& Q# Y5 r3 F" ^" I0 T! O% Y$ k9 j
+ f9 H' b% h) u; [& g& T
9 t2 K2 g! W# O9 P
' q% K8 m& s9 n3 _& N, ]" d. ]5 _, X' L/ M; N1 F
% F" I3 x. L; ]8 U4 \
<template>
' }( J7 S: B8 h, Z <li @click="deleteItem">{{content}}</li>
9 ~7 Z, c. y2 C' `</template>4 c& S/ b" P# K4 @9 j- i+ c$ a
1 D& r! G! x% N# y' z9 R+ I<script>+ ^) T K: d% o& {6 m! [( n
export default {0 a8 U" L( F/ ^
props: ["content", "index"],
, \; T9 {* r! E: t y7 P. D [6 o data: function() {
. i( ~1 E+ @3 H2 o D$ N return {};
5 @' D5 N: \0 S' K& }1 [ },6 d& l& a0 _6 l$ r) G
methods: {& W! T( J# K2 P/ P2 B2 A! k
deleteItem: function() {; x( d( ]5 ?% j) J& p
this.$emit("delete", this.index);1 j+ B$ z% \. @
}7 d7 ?- b* j7 E: V6 L3 p
}; T+ S+ g5 q- ^# ?
};
( a% I9 ~" ?9 G, z4 j- q# W% A1 M</script>$ P. l3 g& G2 |+ w" [$ [
1 \ j, ]0 _4 p7 m: {0 L' P
1 }6 g$ I: _4 s! G5 ~& b* @" |+ G) P7 Z" z6 X
$ I. \2 R% G. \, w* Q, C |
|