|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, r: J2 X6 u @& g
4 Y% Q4 D0 O0 k. b# U$ ~
$ b8 I& B: N3 f s
7 o- l/ c/ E' @<template>
, E5 x* ~! [1 e2 M! w <div id="App">
% _( Y* l8 R: H; i( k% G O- M+ z2 T <input v-model="inputValue" />* W6 V% R1 H. z
<button @click="submit">Submit</button>
d6 Y T3 b0 q1 e; P3 F z" h <ul># H/ h- f7 B& l, J& w
<todoItem- R2 p: v0 L) y! o* i+ g
v-for="(item,index) in List"5 n% N) s1 w0 `# u
:key="index"
. e u# L% G$ g4 W9 N :content="item"9 E/ U: [% b. U$ n
:index="index", c9 u) |8 D. ^- @
@delete="handleDelete"
' t6 e( z- t+ E' `# B ></todoItem>" A6 u; }! y& y8 G6 d6 m ^0 F
</ul>
7 R7 @9 R' l8 ~" t O </div>7 }/ n$ f. B0 f x# V
</template>
- U8 L5 n! \) ?" Y. z# i0 Q! l9 T6 A+ i8 i9 ~; _! D
<script>
0 n: P z) E! n7 X% yimport todoItem from "@/components/item.vue";3 l j! H! P' ] F* o
' a V* r6 {& v% b
export default {( s- a% Y( O' c$ q
data: function() {$ y, t' n) L: p3 W+ I, [4 d0 N
return {" h1 \* Q' }- h
List: [],
) m6 K% l& v K W1 b: w$ Q0 o& F inputValue: ""
9 M7 J' |2 ?1 v };9 {- t8 a" v" k4 X! n3 q
},
7 I7 Q1 w) n2 s2 P a components: {
3 K$ b5 I2 s, c' f3 _4 e todoItem
l+ |+ h5 ~; N+ O( p% O },
, R( A' C' m) H8 j: s/ j; { methods: {
% H* ~% |' k' v0 n9 t submit: function() {
) T, _5 j& s! d& ? if (this.inputValue != "") {9 F8 M" k+ {- A. T0 f8 i
this.List.push(this.inputValue);
) E& I. o. V, t1 }4 z }8 Z5 E- ~: u1 u& Z! d
this.inputValue = "";
% L# B" {- F+ i% u k/ g& | }," d; e: f Y! U! ]
handleDelete: function(index) {2 H! c+ V7 T1 Z% Y
this.List.splice(index, 1);
2 s2 Y' c, |' D; c1 v } @6 v6 g' e* b' ]
}
6 f% G/ s# I! h0 j5 W1 {9 {+ w};5 Z$ q. R) n1 _# G: Q
</script>$ Y, f2 F) w3 T% t& E4 U
^# M' u/ ]! u; G& t1 Y3 l2 C" i+ |: {- ], |
$ L0 }: e+ v/ N6 x. p3 U5 O, F K& g& F; O* s9 f
" H& ] C) H7 l y/ A R
# j; u" Y6 w; I& D0 k9 s. _
) ^4 M4 }$ u5 q: z<template>
# T% l+ ^% G) k- J0 S <li @click="deleteItem">{{content}}</li>* e D v' |' L3 y9 z" G# Q
</template>
E3 Z% c# i6 Z t, F/ l2 g7 ^& g# ]3 L r
<script>
% _: c; W6 O" p' _. vexport default {1 g& ~- C1 X }! ?( l# _ E
props: ["content", "index"],
: v8 k' P* s- g* V: H data: function() {8 A5 d* ?7 ~8 @. E# h- ~. w
return {};+ h' b- z1 w& n+ r
},) S, u8 W f3 g8 l% ] o
methods: {7 v( o4 _: Q4 O) T5 _$ `$ k7 K5 v
deleteItem: function() {
0 p- U: q8 n. l' o- Q( A ?% w1 W this.$emit("delete", this.index);
: F* Y8 H& e, x7 c. P6 _' n! D3 d. L }
2 C% f) ]: W) m0 S+ P1 p }& e( v) v0 ~$ l1 u4 U9 x
};; }& n4 X& C& ~* O4 D$ i8 F! v
</script>1 Y o Z- o: Q4 d' k
$ P0 `5 L1 q) N" n2 \, j N. @9 x+ n& h1 T7 W
) \' Z$ |6 G0 d; ^0 k4 g' a0 y9 H
4 l/ a& B% R* u! k |
|