|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
' V% H' p) E0 T( M6 H0 |" K$ X2 y4 Q' H
0 C G( B6 r G- ?
) c5 h9 i8 g2 a
<template>
: p0 U8 `' I* F3 E <div id="App">
( L8 K( L" x& D: {- t <input v-model="inputValue" />6 w4 p! Q8 J; I) a' w
<button @click="submit">Submit</button>
9 y" d( i3 J6 Y* H$ X8 u <ul>/ c: L4 ~; b0 u' G m" p
<todoItem
2 N/ ]7 C. Z' O. B0 f& v3 G v-for="(item,index) in List"
8 p( o& c3 K+ J$ G0 t :key="index"
5 b2 E7 R1 q F& J5 ]& x5 N* u4 | :content="item"
! N& G/ O% Y5 g. P/ |# @ :index="index"' s, q& W8 t- ~
@delete="handleDelete"
2 n- Z7 y. ]( v# `1 @( i ></todoItem>! j3 g, N4 ]& R$ y9 m* f/ _
</ul>
& L2 i" x' @1 P0 O </div>
$ l' s( O9 [+ A! Y4 L3 ]1 x; |9 b</template>
0 r" _" B5 |; d# v3 v7 R* I" @8 ]
1 u+ c2 N7 H6 ]2 O<script>& n* A0 q) o: n+ \2 Z
import todoItem from "@/components/item.vue";
5 w$ ]6 ^8 l* } R; D
. e* _( z* g( y5 Lexport default {4 p6 H7 I4 Y. n2 ]; p- |
data: function() {+ C; O) e u3 B9 p3 e' A% k8 \) ]
return {
3 r& }7 K x) e) K$ V List: [],
9 A1 @, {$ Z/ C% N* p9 x2 H inputValue: ""& {* G {) ^+ [: f& |/ Q
};
I3 ]1 P. N, Q% q' l: g },( V' I! \+ Q6 M
components: {
6 q3 T" ]. J, j todoItem/ f6 I% b( S4 Q- v
},& a6 Q4 j3 A) ?& X( r
methods: {
% k j. f2 O' i& w submit: function() {
3 ~/ _) g% N h- F4 ?" n if (this.inputValue != "") {1 X7 E# }' m6 @) m$ g0 i* |" H
this.List.push(this.inputValue);
: f3 @9 v; y5 @8 E a. p: d) Y }
4 a4 K3 C6 {. n' y7 { this.inputValue = "";& A6 \( H% k) @: m! ?1 y
},
& C. o$ D& M" w$ c: R& n- f handleDelete: function(index) {
+ T {; C" L5 o( Z. A2 [ this.List.splice(index, 1);% g8 r6 m m6 \/ ^
}
: F1 ]( M: D6 O5 Y# G9 p }1 ^! V0 A" ]& [& H- N: X4 P
};6 r; I# W! u5 @: u
</script>* N g7 g7 O: L: q/ @9 a
; G# r: i; Q; s% s$ U" e& o$ m9 y# E, u9 X/ U
2 ]5 C" b/ F% S+ E+ M% s
% g5 S1 A/ ?: S: R
& d4 j8 K; ~0 ^$ U% }
1 n4 g" ~- L$ j2 [4 M3 {# Y/ ?2 k. D9 K
<template>9 R2 @. W. C. ]/ e
<li @click="deleteItem">{{content}}</li>
5 T- K, g- f( O3 Q" h8 M</template>
0 [9 l( x( a0 Q4 Q7 [# {2 `0 V' {2 Z$ ]9 K+ q9 @1 p
<script>
f3 |- V9 n0 F$ E& _export default {
4 z5 l& S# l9 F, X9 B props: ["content", "index"],
+ o9 y1 T" P8 |4 X data: function() {& b. G, n8 O! C% h
return {};
' q2 V. m/ @3 j" }$ O0 w0 ?0 ]+ q },
! O4 [8 L6 f! T) C methods: { f0 r$ K2 w; F( B- }& f! H. W2 x
deleteItem: function() {8 _0 A5 u$ w- {" ]+ U+ ^
this.$emit("delete", this.index);) \6 v, {6 U* A3 S6 @8 f5 R1 X
}
- N: U* p3 X+ X7 I) s }
& }! r. f1 N% v3 u};! I9 P; t! T7 N6 f1 y3 [0 \
</script>
' u: ]/ u; V( I
9 D* K0 J' F4 Y" x. e2 y2 c
: g3 U* \& c$ ]; H! x$ o! R& F( m: J8 h* D2 p- {6 L7 X
; U2 a/ x/ P7 S- K
|
|