|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 t* A$ _# N4 m2 h, j" c. u
6 \& H% y& S' n
* Y$ N9 s m, b9 H0 M8 t; [7 N9 |! Q) I+ D8 q1 M& `' M( e% \; U
<template>
6 F; y4 m( y& z <div id="App">
6 y G+ [: O# y# F4 L- U <input v-model="inputValue" />
( e+ e! I! K2 X) S <button @click="submit">Submit</button>
, O! b: v7 m% j- j <ul>
: n2 h& F! c) Z! e6 F t2 L2 v/ H <todoItem
O. |( u3 C( b/ `( R v-for="(item,index) in List"
* r0 J, s6 t- ~' j :key="index"5 _6 ~. U; b5 F' X# G
:content="item"5 Q$ `9 F0 d8 t; P; O
:index="index"
; w1 f; ?2 J' Z. l, @ @delete="handleDelete"1 B( g" a3 E& [4 k$ r' ]5 I. Q% [
></todoItem>4 l1 l8 H7 [ X0 z7 A
</ul>; M a( h: C# W4 L7 u& O: y( Y
</div>) Y* W/ F- R3 [& l0 a1 k5 g
</template>
, L6 A1 o) S- L7 ~( i3 }" Z% j+ y' _+ T5 B6 f$ T! u
<script>
% ?" N! S( ?6 ]" W. ^. g% _import todoItem from "@/components/item.vue";4 k8 ]9 M* g% X
1 w% ]; y4 M z/ L5 {4 S
export default {% C! l& m" x* M# p+ M9 _3 A
data: function() {
, B% l/ d% O; ?# u+ g6 R: v: i return {
8 } \3 \: D/ L/ h4 j% j6 o List: [],1 ^+ E) V# P W/ G0 G
inputValue: ""
' A" D& m( C0 a };$ g2 m: x7 f" g" ]$ o+ `
},
; ~6 `& N. G! F! M. r* m: s components: {
: n$ F) T/ d) K" S& _1 r todoItem5 ?4 |; F7 ^6 C- i/ R$ B+ M
},
0 n. q- u- _4 C9 X; W3 z2 U methods: {& p" ?4 ~4 s2 g; F* l
submit: function() {
2 l1 ?4 F. M( z' I if (this.inputValue != "") {
9 m, {* Z0 \8 s, t% ?( l this.List.push(this.inputValue); ?" a9 j; V7 [9 v, [
}
; }: R$ o8 R2 ~# {$ a4 w this.inputValue = "";
- d* o" { _5 f4 n4 x) T/ ?4 m# ] },( e0 C9 @$ ^+ U C% G! a" K
handleDelete: function(index) {) P0 D. p; R: G, L
this.List.splice(index, 1);% y/ t( x0 `2 {/ ?' h; e" c
}( a# ^ X; U) X J
}
4 V0 M/ e1 ~3 l0 S. p4 l, ?};7 j5 W9 T7 y' d5 f
</script>
0 v7 b4 Z4 y! j6 M% h( o. y8 P
& K' y4 n* J9 O- x% @* n g
6 f f: f1 A5 D1 p/ R
+ d& f" q6 W* B3 z8 `9 \$ P
W, ?1 a3 _4 a5 Z3 B% ?% i/ b: A L% p8 v" ]* F% o: I# ~$ U
% O9 e/ r1 L. o5 d5 ^) Y
- d+ ~3 _5 r. h<template>& @ S# _# Q6 Z$ @3 l# G
<li @click="deleteItem">{{content}}</li>, J D0 q8 s+ e0 O2 l
</template>6 V4 i+ u7 q$ g' j
) w1 [. O+ X' R( W1 v<script>
0 x+ @% P! \. ~: e0 S* l% zexport default {
3 v- \1 k3 [- z0 R8 H props: ["content", "index"],$ {( i q% h7 _
data: function() {
- {% r/ M$ n# L0 `5 i return {};
* U7 i* }/ d2 }$ i },7 C8 `# `6 l7 }' A
methods: {
' S% A* x! c3 G4 }$ G deleteItem: function() {
, P) i7 H1 _+ {5 m$ |, P, ] this.$emit("delete", this.index);
* h: m( G$ S+ G }% D: O# C( n4 e. v& ^
}
1 L+ t, v% e& F# V};
+ E- J$ e1 o! i% N$ e/ X</script>! }" x# N1 K5 a2 [6 j
9 J# Q' p! X7 B
8 M/ |1 N9 @! y% ^, B
6 F7 N) X* w& l. v% T3 ]5 u9 Z& B8 U' J) k% I h6 l
|
|