|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- X% i7 c. P! Q' t6 P
' O$ j; }3 T! X8 h, S4 p* m3 B/ B$ C e' I2 Q% S7 P9 |7 k! V4 m
% w) }1 y1 p+ X6 g% K" L<template>% E/ Y: k! F' \
<div id="App">
# f9 C; t8 V9 `2 K% Y6 e <input v-model="inputValue" />
% n: S9 U, v0 O* t' g3 B <button @click="submit">Submit</button>% j) @* m; E$ m; \! F
<ul>
' W& O7 \2 o2 b9 a3 e" J4 w <todoItem# Q+ x! ]9 G, ^6 X+ G8 B) n, |
v-for="(item,index) in List"
# c( `0 n' }" R, L; B: |6 Q! ` :key="index"
% n+ H, r, r3 [& Q) n8 l :content="item"
- r4 J4 M' Z0 m$ G. X+ X :index="index"9 k# n/ T( ^" X9 ~, Y5 z5 U
@delete="handleDelete"& k9 Q# A* L V' r8 ]
></todoItem>
% K- z! u' o! f </ul>
" f8 g$ x& C. s L! l3 ^4 D </div>
6 M) ]7 K' l$ r. f7 d</template>6 N: S! H1 F' J1 P
5 f1 h& G- b4 s* o% l4 y<script>/ @9 h4 A& q( l& ~! q
import todoItem from "@/components/item.vue";
& G4 b% ]( m! m+ S4 l3 ?3 T' C( g' s) ~5 S3 z: \5 c+ Q; D8 U- e
export default {8 ^: j1 {% {" Z% B: E0 Z6 ~3 {
data: function() {* F* s5 [( a* |4 P# i
return {) {1 G; {* N& w; D! V
List: [],
) l7 ^5 ]; t% j; H5 D- a- E inputValue: ""! Y( {2 R. T1 m( A2 p5 ]
};
% U" Y# _2 _4 h5 M },
/ k1 x$ R! Y. k; |3 ~# S components: {
, d# p1 e2 i& @4 \) O todoItem
" L, d `' L7 ^3 S' N6 s },0 ]# U6 D5 J) h4 W9 z$ Q: {* I
methods: {
$ @6 K" V" x' P! C( A submit: function() {
' X2 A3 c$ p) ]2 W0 c2 t if (this.inputValue != "") {; t+ [! R% {1 P( T& I7 f) B: a" u
this.List.push(this.inputValue);$ N) n, Z% u) `1 Z6 k
}
0 s2 a5 x2 ^9 j+ ?# M this.inputValue = "";
# X% m5 P$ M7 B' C \ },
- P! c* l( |, w/ f0 y8 d handleDelete: function(index) {) i5 {" l5 H- w9 N! Q# h; m& i* h
this.List.splice(index, 1);
2 M5 J/ E1 [# l* L$ c }
s* n$ D4 \# t# P; D' ] }
, h% d# U3 l! g! `};2 a5 _3 H' W* W# }$ O( g' G+ [( I
</script>
% q- _: K% [3 A* ]& _* k2 x: i) l9 U% p* [ Y+ B1 _
* J6 C2 N$ m7 o6 ]* E1 f. f/ D- w$ |8 [3 `, O. G
/ a& l. C$ P& O; @1 r7 x: |) o
1 G4 b, C- s; G5 ]: N; R- t; r
' H; G7 L8 Q; J8 q
( l- l9 G9 `# g; M8 C( I<template>
) J4 w8 O& `" s# B. i" S <li @click="deleteItem">{{content}}</li>
: J4 A% O: K4 N* M0 U% n</template>, g) u7 v! \; D# N% o! K
! F) { N& p0 O
<script>9 R0 T( q( J6 k1 p9 A
export default {6 O7 y8 Y; K5 T3 T
props: ["content", "index"],
- v! w2 Q- ~" x; N data: function() {
A; j" u9 Y h* g( v8 F0 F; s return {};) |9 I# j5 M2 l, i
},
0 j2 I9 U+ p5 N9 ]5 H" P, n7 i8 M methods: {/ b4 l% l7 ~( L# Z
deleteItem: function() {$ o# Y7 }9 Q* L5 x0 z) Z
this.$emit("delete", this.index);
; B& M/ @" L) ~4 @$ k }
; x" e/ r% Z# S, h$ i }, W2 I8 H+ f ]7 u f
};
3 w; m L" f9 F7 A</script>' {' N+ K* `- M' p: [. w
! P$ X) A! N" H- _$ s+ Z2 v
6 L. Y k7 S @8 k. P
8 ^6 X; t+ n& U+ e$ p. t* r% z& Q" |% S2 l) t/ q+ F% u
|
|