|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
; |4 R, C! Y4 S7 O- u. P4 f9 p
- c! F0 n& P" Z& _) O9 o
" ?9 m7 Z2 r* w" T& s2 F; r/ b' C
6 J4 l w$ J4 [/ B7 i( [<template>
+ l8 w' y) [% `) Z" E <div id="App">
& K. A: C, X5 @ L | <input v-model="inputValue" /># Y! h' y; j* D
<button @click="submit">Submit</button>3 u# X A( q2 s+ @5 X: y+ I
<ul>
2 B8 h& g% g$ s( i0 C <todoItem
* m2 C5 W2 g! _# S2 s$ y v-for="(item,index) in List"
* p1 \" Q" r: B$ K$ [ :key="index". a' ~7 h) r& w* t; T3 O2 F: k$ W
:content="item"
( [' z8 n. P1 a9 A T+ ? :index="index"8 G9 y9 e Z) V, ?4 s9 C3 p/ C2 M
@delete="handleDelete"! I& ]$ m3 I) `+ \
></todoItem>
4 C3 l" O# y9 s+ R& [9 V </ul>. V+ m7 [9 G% S# R7 g9 Y( B8 x
</div>( d' l3 N: }1 G5 S
</template>
# p8 f! S4 X! h3 A! `! i2 T! p8 b# h% s
<script>
: F3 s; D9 l; {) Himport todoItem from "@/components/item.vue";! R( G& `& g- y
" C1 @ H$ W( q7 G X
export default {
* e' \5 n% G( `- P; v# j data: function() {, m9 S2 j- S. j1 k1 ?; u) F. C! ~
return {
) l4 X6 A9 s4 ` K' @; a List: [],3 r; `' ?& ^4 D7 G! m+ h0 U) y* R* |
inputValue: ""
, o2 U5 K& I( [ };
/ Q$ m7 W3 N1 q# J# g0 b },
' g, P+ w0 B2 L# L4 y+ H: R' [ components: {
7 T4 N" \, Z H% I. Z6 |2 j; G% u todoItem9 x+ \9 k1 Y0 E7 M6 `, O. U9 E6 Y' m! u
},/ K! s/ N( Y6 }
methods: {
( ^# t% @) F$ y8 J8 J! Y submit: function() {
) K; X c6 u/ h0 v if (this.inputValue != "") {) I& Y. s8 ?3 a0 ]; m3 M8 r0 `
this.List.push(this.inputValue);+ v l" v/ ]0 F9 f
}% y/ K8 P: e u
this.inputValue = "";
0 @; x2 s0 P* }2 `# [$ ?& I },. X% \( Z3 v9 { |& ~
handleDelete: function(index) {) m1 D4 Q% K) u. M
this.List.splice(index, 1);) u3 U x; \1 @
}+ B) ?1 Q, L5 q0 f# V7 Q& j
}
0 A+ O) F( d9 H& \};
$ Y0 A3 n- v2 X1 }2 U</script># F: F+ M* v2 c v9 I% Q
, g f) M n' v) C6 t8 H
5 m' C% Y# x0 D5 p# d2 G0 \! D6 O( M0 h5 M( O1 T0 ~9 w0 D' T
( ~6 T# C% ~& `) X: ?% ]. }/ v1 i6 j0 B
* |7 ^4 Q O* g" O$ G) b" ~0 U8 q# e7 J' H+ s
<template>
) O7 }# v& ~4 o0 M <li @click="deleteItem">{{content}}</li>
- ]1 s% W' r& K) S2 Z3 b</template>
% d. H* r, V" g' u) p- ?: m
+ I8 ~# i% s% |, t+ u" w<script>2 u: K! a* B! G0 D( B0 T# A
export default {
1 I! d/ x1 |5 _1 N( N* N; S props: ["content", "index"],
3 R/ O& @$ `4 Y8 v7 v9 w6 T7 w data: function() {
+ a2 _9 n) L$ r4 _; [& w( ? return {};' Q* a$ T, m2 X1 I* X$ u- j9 @
},
0 j; i) S X+ b! e. ~- _ methods: {
+ E x7 h3 V3 z deleteItem: function() {
! V5 B/ r$ R% A# T9 j this.$emit("delete", this.index);% i! N p" D I) }$ b& ?# [
}3 T' t0 m8 x& m2 D+ y: \2 F' H
}
1 i2 S) X) R! m4 O# s};
d2 v5 ^- _; G$ x. B8 s% S</script>
3 C, o) d* N: ?1 j; l9 y
3 d/ E( U0 b; @$ X& _) \$ R* O) ~
. s$ |! b N5 E( h& i4 l) H
$ h4 c) ]2 t6 } b
+ X2 l- C {0 v7 o/ o9 p! M |
|