|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
+ [5 F: h: O+ h, l9 n% D1 w- b- j( r# S! U3 P
$ g2 j2 R1 w' P: S
7 Q, c9 j/ v/ w5 G0 S/ I# n<template>1 y( w% f4 P# _9 e
<div id="App">
; K& W% e6 w0 ^3 ~ <input v-model="inputValue" />
" R3 g$ n) n6 T <button @click="submit">Submit</button>7 |/ T1 N4 }2 [2 P" s3 l% F
<ul>
6 @2 G6 E. l. u9 h' E <todoItem
1 T8 a2 l+ h9 y v-for="(item,index) in List"% d8 k9 Z; o! V
:key="index"; y& p$ D9 G* q+ t
:content="item"' \+ E; s$ L9 F3 D& E3 P2 H
:index="index"
4 H }+ @- u: y& g1 [ c @delete="handleDelete"9 B; a0 P7 e1 ~4 _
></todoItem>$ }4 ^5 T u8 M9 U
</ul>
, N- k- Z& a$ Z4 c2 e& F </div>
3 K5 e. Z& M3 _7 c/ f7 t</template>
9 G" C( v; x( K% y/ {( F- }
% X& }4 a2 S% z! m0 J! m- _<script>
) j' e' H+ c) `& @& s$ w" |8 Himport todoItem from "@/components/item.vue";! M- D6 T3 |+ z. ~8 p2 P* O
2 x f; S" i. R, vexport default {
! A+ }$ Z& y, R! L8 T: X data: function() {4 b. d( w: v) R% t* Q! i
return {* k- o& `% J6 i. l3 @- m
List: [],
: t3 ]: I: D8 w' w inputValue: "". E5 r7 O0 S4 Y
};
' o4 {# X' Z1 i* ]1 ?3 `, i },6 @. B5 T/ l5 W; V5 H1 g- n% O# `
components: {
" [3 @9 k6 t: B& s todoItem: Y/ d4 y% X" u
},
$ k; F) J3 R: S methods: {9 {' ^% O h; c
submit: function() {3 G3 i% T7 F8 R1 F' k7 g' M$ `
if (this.inputValue != "") {5 ]7 k+ [ p' V- a
this.List.push(this.inputValue);
2 X& R* e. T4 I, ^ }8 M1 L' L+ X& d% o
this.inputValue = "";
# L; u/ c0 H$ v. C4 m },7 H6 o; T6 D$ B# G7 ?) }
handleDelete: function(index) {
- p3 x0 V% C* G. c# J this.List.splice(index, 1);
9 W3 R- {/ C. V% U }6 A$ R0 E- o0 R
}( o$ [( a* ^3 D. q, r; {8 l
};5 R) b# m- S: |' D r e8 f) W3 o
</script>
* o) f& Q; q2 R$ ~7 _7 O* r
4 c7 a2 I' \# {: i
$ ~2 X( p* g: s. N- N* m' l i
- O1 U" m' I5 [- h
5 U( v- K+ |9 E) O6 r$ u
% R, M! K9 {9 c" S& {4 ~/ l% @5 H6 F# w% o+ u
" P' a# o# P' v$ u" J+ J5 f
<template>
$ n' Y* t$ M1 ~3 S6 p# m <li @click="deleteItem">{{content}}</li>
! z2 f% E* h6 q</template>) E. s" z4 ^% d( D. _
. m; _: K6 ]* l W' R<script>- ^1 r" [5 q: _6 q) z* D
export default {. J% g/ ~* f& A+ W0 w, Y' W
props: ["content", "index"]," {. Q; y* }* c+ F
data: function() {
) v# f$ a v2 N return {};
) `; G2 @7 V8 L' ]+ ` },
4 |6 e2 V+ z3 u" v% B( ~& H4 j+ H methods: {
9 }0 i7 z, s% f) U1 Y deleteItem: function() {2 z: K% o& ?# z
this.$emit("delete", this.index);( q$ j6 {* j i% {' W3 f3 O( w3 m+ Y# _
}( ~4 f$ J, k& a* U# v. W
}
, c1 q- P4 K G7 v+ k, q: P};! Z# F' W. J5 }6 n5 b) s# W6 n
</script>
) Z$ d" \0 }' V" d. B
7 D+ p. G! t8 u# \( P6 ]2 \! Z1 @
0 Q2 W' B! M& H! Y+ H5 ^. d7 v: C9 A& \( Y* h7 C
; y4 V$ b+ `6 p7 f& e
|
|