|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- a& F( Q2 N" o6 M/ B
* O( w" `2 R s+ V
- G5 t" [9 a" f
1 ? H! F: C/ u) S<template>1 d% M s+ b4 X7 ]4 {
<div id="App">
8 e1 J: [2 ~" N0 H3 u1 P% U& o4 X <input v-model="inputValue" />/ k" V8 N. p' \5 X# G9 M
<button @click="submit">Submit</button>
7 b& v% J* f3 W& q9 [& \. t3 E0 o( V <ul>( @* T/ K4 @1 X1 `2 ?* ]3 `9 o
<todoItem
. R+ e0 D( q3 {: q2 T, U* j0 ? o& _) @ v-for="(item,index) in List"
2 Q0 {) D6 L }7 v* n :key="index"& P. H' \! x+ `
:content="item"
2 I! f% F2 H8 S0 N :index="index"3 P7 V8 C* O& D2 Q: n
@delete="handleDelete"
9 c! o9 O) k( ?# w. S! R# ^+ `5 m3 A ></todoItem>
( {! A I3 h+ T+ Q1 {. U# k* o </ul>4 _) ` n0 \) a$ V0 o) ?* M+ t; H
</div>
% B9 y; e( o; A1 w8 R( z/ g</template>- l% T+ J1 T6 q' T, |# I
3 q/ r% P1 ^5 M6 C0 z9 u4 E6 S; C& z% ]+ j
<script>3 R: q0 U- E! D# P6 o$ q8 |
import todoItem from "@/components/item.vue";
: e$ @' M! ], k+ E1 y1 H
& ~7 N3 J7 S2 kexport default {& F$ Q3 Q- c8 _
data: function() {6 a. _3 \+ V2 y. q$ ~
return {
& O9 Z- h0 t4 f8 r; r: f! n3 H List: [],
6 H- W1 V& l$ N: [! d* y inputValue: ""8 |) P# w# [% z* r+ j
};# p; |: z+ t- _+ b
},2 r3 p5 n" I- b5 p0 D
components: {* e6 Z# p% m5 U8 X4 y4 k
todoItem, y" r5 [! V1 Z% a |2 c& K: G
},
9 j$ e2 Z+ _# U6 Z0 S) { methods: {
; L7 F7 J! M4 x9 o3 `' T submit: function() {
6 h- M C* i+ f6 w1 o) Y4 e if (this.inputValue != "") {
, _* G+ o* T, v. y6 s. \ this.List.push(this.inputValue);
. r9 T7 S" |7 y0 ^6 y, r }# o0 c/ J) m9 R! Y" b
this.inputValue = "";& N+ \2 _" l* p U
},1 |& O- X) W2 U$ T5 i7 z
handleDelete: function(index) {2 ~. y3 U3 B8 D( t3 s4 z
this.List.splice(index, 1);8 l3 S( h' M0 Y
}9 H0 ^' m* k" i6 n+ p5 g0 o
}
7 g3 R: A+ @4 p) P c1 a9 i};
9 C) ~ d" z3 ]5 f" U% M# ~</script>4 O3 i/ x! f! ~- f- x
$ N- O V9 `9 f6 e, L3 o: y
, y+ I' z5 d: U3 Y3 z
R" f- L4 a+ J( f- e$ j) k+ b' ]# K. e% Q
3 s+ D+ O F" K' }9 h$ t+ k
7 i s; X) y; p# e. Q4 @
+ }4 k( ~+ V4 a2 E- Q1 C<template>
. T8 M; [1 Q( W6 e1 V0 i. A* l <li @click="deleteItem">{{content}}</li>! j) D! m) g: \0 T7 c T. w
</template>4 m* K% [, O. O' [' I0 u0 n
3 u3 H. }, q' M8 J2 Q1 }<script>! ~6 s2 M! c E4 s; V8 J8 G& C
export default {
% {8 T- ~, X9 C4 N* h* S- c9 l, y props: ["content", "index"],) T$ d$ x5 f' e% B9 [+ z" }
data: function() {
9 I+ E8 }! w1 j: O) v0 x" n return {};
& P- a* [8 K4 U9 m& f0 X7 b r }," ^9 ]4 Z. B0 q: B! p; z! t8 S+ @
methods: {1 w9 Y7 }9 Q+ ^7 d r
deleteItem: function() {5 k7 T4 {9 o7 y8 g: m
this.$emit("delete", this.index);' G( t `' u( x @
}
+ X8 z9 W, b& s }7 F' [9 A2 N, A n9 p, B
};
: q/ ], A* G* G: K4 a( ?) d</script>
; i) n/ \0 V7 ^; l
. b! @7 q O ^9 _# C, {2 w
+ f& P# [* }: |' e$ c& {1 ?5 S2 ~9 v6 r, @6 R! |! j9 R
, X1 A+ M1 w' u6 N0 ]
|
|