|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 s5 q4 Z% T9 ]
! w: s9 _- j- l# F9 [; ]' L% c. T: X# l7 i+ z* N3 h6 l9 c2 [
0 j: x$ s# z2 M6 j7 a7 L<template>
" H0 t3 D. u& g" R) |0 }* b <div id="App">" p0 a$ X! S6 _" K) Q
<input v-model="inputValue" />
) i7 h7 \) c) K <button @click="submit">Submit</button>
# s6 `! l" B2 h2 e2 Q' w5 |% I. n <ul>& o+ h! q8 N! n8 o
<todoItem
% g' E6 ]( ~1 h( q( s- E% S. p( C v-for="(item,index) in List"
# Y+ R h/ j5 A" z( j' D :key="index"
- U" s; c/ {7 Z) z9 R5 [+ Q :content="item"
" Y0 E; n$ h- z! k6 Y :index="index"( N: P' }3 {& \+ z9 a9 @4 h
@delete="handleDelete"
7 f: K& H; ?; [) r5 l* ?2 O8 v ></todoItem>
' V0 K( N: p2 ~ </ul>
, K- s' o. S$ h4 R4 `" U- V2 I6 f% A </div>" E* R7 s; {* p
</template>
3 C; z* X, P+ P7 l2 m6 U" ?; L" d! F7 i: [: P2 L2 _! L
<script>2 p1 T" A. Y, }6 f/ X( v' o
import todoItem from "@/components/item.vue"; \7 H- \$ |* B x6 B9 _
. t) l7 ~2 M' P; R6 t
export default {/ w8 L5 y5 |1 @) E& N3 V
data: function() {- f- {6 ^2 c0 Z- m" \, V
return {& F }2 W2 ^/ c- ]- P2 d) O N
List: [],
7 g& k' [; i! A8 a' o inputValue: ""
- a( e4 f" O) L' F1 g( U, G0 j }; L7 K/ K3 x {% a- v D
},9 X6 |- G9 W) ?/ ?7 J9 K- [
components: {; _& e0 h# O; v+ [& S5 s& R/ J! h+ ~* {
todoItem2 J$ h# P! u" Z+ I9 v3 D
},
" }% Z0 _- E8 ^8 n# r$ i! o methods: {5 o) M' ^: ]' c3 }7 ]0 E/ S4 o
submit: function() {
3 F- S7 ]8 o# }/ M& g! `7 J: } if (this.inputValue != "") {, d5 W* k* H7 y' ^4 l+ U
this.List.push(this.inputValue);* f3 \# L0 @# G& ~- `+ Q
}4 `- A0 W+ ^1 x3 O% c7 Z% j
this.inputValue = "";# x6 g6 g' e! T/ `+ l6 t
},
* F( x) W7 I: | handleDelete: function(index) { Q5 F3 B3 z* G. |0 }# \
this.List.splice(index, 1);
* [$ V+ H' E8 Q [ }" a9 X% j5 H0 z) ?: j4 c$ d& x. a
}
! n- O& N' {: i};
6 t# o0 f/ g7 a; q6 N2 n</script>; c2 a9 t9 X( f9 ]5 H$ G1 B
2 I7 X- Y9 e5 i8 H2 V0 r+ ?' j" r' u v. [6 F) A
3 t6 m' j. T' [# g' y7 Y3 z
8 k+ O1 X" C4 F/ g" ^* `! q/ _# y# e% w+ }
, c" E" A c8 ^9 B$ L7 a
5 t1 G7 N- W, Y
<template>
. Q2 _! B# h" k" W' v <li @click="deleteItem">{{content}}</li>/ e4 t0 H, E; X Y: N8 r
</template>
4 Z D; Y: x# X- C. P% ?' }1 P. J! }8 q: r- k/ u
<script>
4 U, _4 G, l6 U/ ?( Z' rexport default {
2 d/ R- K$ @/ A: _ props: ["content", "index"],
: v( z$ v7 @+ [8 s( y- s( v' M% o data: function() {
; p R' b ]8 W( } return {};3 _# h9 Y' @& `$ V' |
},: f' f) ~3 K& b0 y. `) [
methods: {% `8 I& G* z1 |6 I1 p) U- z
deleteItem: function() {/ g6 j" l7 p- {& |
this.$emit("delete", this.index);
" _7 k1 G8 ]" v+ V4 M }" @5 A6 W) R& S2 _* i
}% v8 c: H/ f) m6 r* E
};
8 v" a) F" E. w9 s, ]& e</script>
; w' z0 n: |' [2 k! ]4 ?, o+ a7 _4 y5 }8 l
+ S9 O4 j9 H) ?$ Q8 J6 W& V# }# N3 _7 ^
" p$ O8 ?) O4 q. U% N( @: E5 S6 D
( S4 Y( {1 L3 j6 }* ` |
|