|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" Z1 S1 ?+ \& j6 I, i U
: n+ y" \% o, @& `$ f8 R/ b. y- \+ T9 Y' ?& j
/ {# q! _; M3 t7 ]+ J" O<template>$ ]4 c& y) j4 ~) r& n% U" v
<div id="App">) U+ K2 N2 x% p
<input v-model="inputValue" />
% z* x9 i4 G5 U4 H9 n# p <button @click="submit">Submit</button>
7 w; ]/ M, O+ I& J" G8 C( Y <ul>& T8 `, b- K; C+ h$ B5 Q, Q6 R% F
<todoItem1 { Q9 {4 m% t' v
v-for="(item,index) in List"' Y- M3 l# S3 { l# Y% G# u
:key="index"! q, K) V' L K2 ?! R
:content="item"
) @8 w% B6 l3 E- u2 g5 r3 [ :index="index"/ A7 l! m' N. ^" V
@delete="handleDelete"! b; W8 R# k9 Q; f' t9 O
></todoItem>
$ a/ I& \( |7 r# G# _ V ]" r </ul>5 S& m% s6 s# x* j) {9 O; g
</div>. u3 {( K b8 V9 {4 k" t2 `
</template>
& Y! K, c' e' |# v4 B2 F/ a4 r* @5 j2 r# o
<script>
8 o) @/ T/ a5 M* z* mimport todoItem from "@/components/item.vue";
1 W% j0 l Z+ p5 Y9 p( r/ G
0 s+ Q2 R: r7 ^* h6 b) |export default {, G' w$ G" ^8 H7 Z* W
data: function() {
0 {* e, Y) p! b d$ ~ return {+ B0 r6 q. v$ T; b/ V- E
List: [],# a* E& z$ M, Z
inputValue: ""0 w) P4 K3 d' ]4 ^
};$ C; X/ E# ~4 H8 N: @5 ]
},! }+ G# D, l. z+ w) Y6 y
components: {
_$ }( @% j: h7 p todoItem
8 h9 }5 {: I: L" F },
% S, W; B" D C5 w% r6 I methods: {0 q/ V1 q6 f; Q) ]
submit: function() {: P7 j$ c' k! Q* V" x) i
if (this.inputValue != "") {
) @3 U) B3 }2 ^; x5 x4 i4 n this.List.push(this.inputValue);5 W% ~# A1 U' P8 r% j& U
}
& r. d4 H7 K9 N% J this.inputValue = "";% |* y0 |5 X% W1 g; P
},
1 j4 x% K6 u0 @# W( v, B- ? handleDelete: function(index) {
9 m9 m: A% Y* [/ j this.List.splice(index, 1);9 P& c# N& |. t/ S5 H4 k" x" I9 W
}' I$ p5 d- R" E! I& ?
}
O ~& G x. A' M7 W};
7 `3 \+ j' B3 J* P9 m* s</script>
* R4 O3 M$ S; e/ @: a$ Y: a# B9 I% e) t8 H: ^. r8 b7 V) M
9 V& s+ d, T; l0 N6 L# M2 s, J, u: `
. X# S+ c* I8 I2 G4 G6 L# v8 S3 S7 N4 v* T0 r) |. c, Z
. y/ C0 v* K* t3 t
' M/ b5 d$ Y! w/ ]; R<template>9 l+ Y0 u6 D, F3 C" \& z
<li @click="deleteItem">{{content}}</li>
# X* j! w' l7 S: A+ |8 u</template>
2 n3 Z% B, i( w) Y+ I# a0 j( a, T% a A4 i9 u
<script>8 N1 z, p, W* S; j$ \
export default {
: X/ U+ v; S7 h/ G, V props: ["content", "index"],' W9 ?! u+ ?$ |5 s6 B
data: function() {
n* F. L i S/ [, M0 o return {};
$ w' l$ ~" b* K+ G8 s$ P },$ Y4 s! n. V$ N/ M& X. \
methods: {
0 `; O: p" I8 j. |7 ~" ^ deleteItem: function() {1 {6 v( g+ S7 a p% i$ I
this.$emit("delete", this.index);
, e5 Q: \3 a( I$ { }0 N) S4 M- f x: o
}
; h, D! ]# R2 R `: m" T};; i$ a( Y( v8 d+ @
</script>! c5 a9 ]- i( ^6 f x
- `# y& l" |! e$ M* ?$ T3 T& o) L7 [ S7 V9 B) z7 ]
% G6 O8 V" c$ b3 R- \5 r
% J' ?; D* O4 S' z, N
|
|