|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
8 ~6 z& l* M4 i
, e- P( k9 e" r% r& i, d" ^* I7 {5 J4 q* Y0 O/ ]
. p$ f, i; U/ Y5 U4 {, u; O$ q0 p) y<template>
7 X d; ?. y9 _" [ <div id="App">
( o0 o ]4 d: ?) K1 h5 N <input v-model="inputValue" />
1 `0 [+ M& i$ {1 B <button @click="submit">Submit</button>& `2 Z: A( K- V7 W) F" N. S8 M/ \
<ul>
; y; d ~7 K1 `2 _) o' C9 K <todoItem
' `3 ?, z) O9 r4 Y# _ v-for="(item,index) in List"
- r$ m9 f5 w2 D7 p6 Q5 B3 F :key="index"
1 K& C& k' F% A9 F& u :content="item"
3 t+ R' O/ m+ N :index="index"; ?1 y2 d) d6 c& o3 F/ i
@delete="handleDelete", F# v! {! s, f( L# L
></todoItem>
3 x0 _! p4 f) _ </ul>' }9 o6 x1 }2 l/ B+ _! Y
</div>
. x# E/ h0 }. }# o</template>
9 O: n3 H* V, @$ U5 c- ]0 r/ H5 a; }
e- I5 |! T) z" x4 _) p, }0 [) ~<script>! [5 b! s( M! p2 j
import todoItem from "@/components/item.vue";
0 [3 Q, z, h4 \3 m- V, T
+ V4 F* O7 H8 a8 Rexport default {6 r1 [: C7 {; o' j
data: function() {4 j8 c( d4 C2 I" J+ L% i4 F
return {
7 B" w% O' g) T List: [],
$ o6 w& y2 H& K! {7 L3 m inputValue: ""8 R3 }! M1 b' _- r
};
! Q$ ~( k7 a& d* V* B4 n+ t$ g$ n },9 |2 s2 P/ j& X+ ?
components: {! k, h$ B, D* @9 A
todoItem4 O4 j3 Z, d7 u% ?( m6 B
},
0 Q! b/ k- o" j6 n0 A: Q7 \ methods: {) S/ ], n, v- m( |- E& V3 ~, L; q
submit: function() {
- h$ U2 |7 e" l if (this.inputValue != "") {
: j$ D: Z$ _, N) y4 E+ h this.List.push(this.inputValue);, V/ E% G$ h+ x( D' H8 w$ B# p
}9 f. i' q# g/ j( K, {: ]
this.inputValue = "";
3 Y, Y h6 _. e, Z( x; x },
. g! K% ~3 Z' ? handleDelete: function(index) {6 l3 I: q% _! ~- g0 t: v5 e3 J
this.List.splice(index, 1);
* n x: }5 J$ x# U' K }2 M% l# k0 z$ V! Q: `
}8 t+ t6 u. ^* _
};$ F1 L6 a7 q' J# {
</script>- m$ `/ l. Y( @' u
* Z, F& P! m; E. p _% ?" Z
+ x5 G+ V L4 N9 V; X
6 z9 A' k* ]' y. e2 v* Z8 l# e$ k. S
" O+ j/ E9 Y1 N, Y; k# c% Y9 `
. g* c5 c3 ]: E& J
: j8 j2 x; w# L. F6 @- w6 Y0 A
& a s) w2 @4 [2 U8 k" I( f<template>3 \. x( z# \( r3 T& r
<li @click="deleteItem">{{content}}</li>
, b8 S+ N* m+ \9 v</template>
# T% S* g3 M% ~7 L" R* F6 Q" i
- z: K" u' W2 n5 ^. p<script>
* S! Q: j ^! R8 c0 a$ j$ Gexport default {
6 Z @1 [, [' o# e. {- U& |$ G props: ["content", "index"],
' _! g9 [% r h5 l data: function() {
$ [. ?$ [; y, g4 }5 {: Q: ]; G: u return {};+ i4 V8 J$ c" t# ]8 }# \. s3 A
},
# Y( H1 s4 s3 q* u& b# _# P methods: {* _. K8 j- S* Y1 U9 [: R
deleteItem: function() {
8 O* Q" n$ r; N this.$emit("delete", this.index);; C. M- u. ^" W K
}6 k+ I9 T. m, l- ~
}& i2 t* p1 G* \1 l$ f/ B7 X
};
3 |) W6 n8 L* E8 @# G+ m</script>5 Q/ L! r Q- {9 M; G
/ `' l+ _# a/ E/ o1 R8 v, r% e; C
! R# |5 G! t- Z, W
6 a5 [3 T" ^: U! Y% A% I; } |
|