|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 n: R4 q( Y1 q( {$ Q1 ^# X0 }
# J) f7 [3 H% \' t) I$ w) ?& B, j: ^
. F' U$ r& M; b3 p( e, r
<template>
% S2 X. y! I1 V9 v; ~1 _" [, C <div id="App">" P* }5 A4 X+ \* n7 u
<input v-model="inputValue" />
. {" T8 y7 |! a& D; |4 j. ~) E <button @click="submit">Submit</button>
3 d6 p. h8 V* J6 p" m- |: | <ul>
$ |7 n. l' W. W( t( \( N <todoItem: H9 i8 n7 e) a* N$ t% [2 u* b# D
v-for="(item,index) in List"; U' V: ?2 [ ]$ S! E( U
:key="index"
# C* P0 e+ [/ l) r" [ :content="item"9 t* G' K7 y6 k% I9 A( y
:index="index"
2 u+ R+ v/ h, f0 p6 m @delete="handleDelete"4 j" C4 Z( u2 i4 |
></todoItem>! Y" A _" r$ L6 i6 P. |
</ul>0 t3 F# S* o# p5 F; U
</div>
' x% }2 F- I' C: Y. m</template>) L) K$ ~9 F+ _1 u5 Q
! Z9 K( e4 _+ s. W3 h4 C+ l
<script>1 s4 T' J ]. n) s
import todoItem from "@/components/item.vue";
; T5 f2 S0 x0 I7 O0 o7 ~. K; ^5 u* V
export default {4 u0 x) a$ f" c( e# c( K
data: function() {
" x: \- C9 l! c$ w return {
. g1 C* j, v8 ?) l$ g List: [],* x; G2 N0 k i) P5 U& q1 n9 ?
inputValue: ""
E- s( j! j- V$ K- L# e }; v0 [" w# `2 D
},
) C1 z8 w( l* C$ y: N components: {
6 O. S' e4 x8 n W* ^ todoItem
5 e8 [% u" t' r6 i- \ },) j' m) e9 C/ ~- _+ m1 x% w# B
methods: {
2 n- o/ t" G1 j9 O9 Y/ E7 u2 L+ q# o- | submit: function() { s# r4 E% j. e( g, Z
if (this.inputValue != "") {# V0 I2 d! m7 Z* g
this.List.push(this.inputValue);
) x, M+ n0 v4 t }* k$ t) j2 _! b8 f/ B
this.inputValue = "";6 J7 }, |8 t- f" m
},! Q# N% R, g" \" N) ^( {0 K5 o
handleDelete: function(index) {6 r0 q7 M3 l6 N; `" l7 P+ d" ~0 y
this.List.splice(index, 1);$ O$ _3 h7 O9 \" C" ~! ?( ?5 Z
}; W! J. r' V, s" {% m/ B
}0 V8 [' x% j, [+ p ~' D
};
6 P! L3 X( a5 v2 q/ W1 ]! E5 [</script>
/ f# Z) F x2 |& G( h0 ~2 r# ~6 @$ N( A- ~9 h5 K8 ?
- d" _* H6 }. ]0 Z/ W) x8 L+ g
! p7 K! l* p" @3 h4 b* s4 w
7 C3 Q! m, o6 c' |, D5 T; c1 a: y7 v2 J# J) ^( E# L6 {
2 f' c8 \; y; l
+ `1 G2 b8 L/ f) H0 d3 u9 M( Z
<template>$ ^9 q1 G( }( A- m. s1 z
<li @click="deleteItem">{{content}}</li>, E1 P$ O/ K9 \+ X* i/ U
</template>0 {8 D/ \/ p0 S* K
: R$ S7 l% x! I" S. W% U: e* H# `<script>8 N2 W! ^! R; S9 W
export default {
" n, ?1 ? t. C3 e4 J, F$ g props: ["content", "index"],. q6 X) t. ~) u: K. l
data: function() {* D0 |' K( \' `/ ^ S, b
return {};+ `. ~& i0 `3 v: c8 F& t- C
},0 M0 U2 I8 \2 O |; u
methods: {
3 h9 E! W: \6 G5 L" y# d3 Z deleteItem: function() {
2 S" @0 [' n1 _5 A y0 J7 P this.$emit("delete", this.index);' {: w0 p; m! a0 ]1 K4 H% Q
} s9 p: x. C K
}
; Y- t- F l: h) g$ |1 w};
) S1 `# X$ d- s& ~! I: B</script>, T. n5 T. ~! }) \
8 U8 M s1 ^7 E; a
! P$ y1 j4 l$ G) Q2 Q, X& j& B9 w
% l, B1 R* i: c |
|