|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 I" z1 h& U$ C5 ?2 m% U; T4 v
7 }. Y' w. H$ G) w* L! C- X1 G/ d: s& W/ y0 { }: K
. w: M- M' Y% b- w! C" g7 T& ?. i
<template> a, E+ y# p3 j7 I$ n
<div id="App">$ d, Z" t9 D; D
<input v-model="inputValue" />
2 r! z' _" A W' ], a! w <button @click="submit">Submit</button>% J4 I7 G$ O. X5 d
<ul>
5 Z+ b& d1 @7 H7 P; V; r ^ A+ Z; \ <todoItem
; P4 B. \ s+ @ v-for="(item,index) in List"0 n% p* m( V9 m
:key="index") @, p3 s' s% B
:content="item") j, A% R: }! S/ p( [# z# l
:index="index"
) m8 K, r- ^; [) N2 g @delete="handleDelete"
% t. N3 w" x) _; } w" V7 X ></todoItem>
: \1 M8 r3 ], ?7 s8 I </ul>
) K; n- a- Y% i. c0 Z5 i5 M) _ </div>
$ S. i* F$ E5 H</template>( ^, V% y I' Z, q% y: T8 m
6 C$ @' T5 e! r* u<script>+ R' ]* S9 t. T3 O: Q( R' }+ B1 d
import todoItem from "@/components/item.vue"; ^: ]. M) J+ L: S" C4 w$ @
. F9 I) W, x1 d' ^5 T9 [export default {. Y5 ^& G9 W5 g% _5 E* ~
data: function() { t: X! V/ C8 E+ I
return {' o0 Y" l7 ?4 F. t9 ?, u q2 | e0 K
List: [], z- T2 b$ ?8 G( u) G8 X
inputValue: ""4 }0 h0 o# h5 e$ c% Q9 N( `, T
};
/ N' R4 ]' B3 ]9 u. U2 `( Z4 o },, l. ?- ]! w* O
components: {
4 J% c+ \) Y/ o+ W/ ? todoItem
" Q% _( N2 k# E7 O },& b4 p" [" t6 o0 b o
methods: {! a3 C! f" c7 \1 Z" G9 x4 W
submit: function() {
1 G: k2 W- O, h if (this.inputValue != "") {
( g) @. E1 ]) ?* J& j2 c this.List.push(this.inputValue);
. A, z1 ]- `4 h; ~" v }' q* S8 J6 |3 W
this.inputValue = "";5 j j5 j1 `$ X6 j. ` _* P
},! [9 u- O6 d7 x. A( o" M
handleDelete: function(index) {
7 b) H0 b6 P9 F this.List.splice(index, 1);, \0 P: Z* H' j- `: h* e
}
9 _/ |+ m* z8 u4 g }# _9 p6 R# f) L, u* L$ Y
};
2 f: [$ z, U, a* @</script>
, o& t2 t4 b) G
z1 \0 _* V1 y* b; M3 m7 F, u+ \+ `$ K' j( b) e* s7 N6 z
% X$ F& M: k" X- x; S) j& ~# Q8 l( V4 ?2 p
6 }1 G4 A& u3 ?3 m; x! ~& D. R' {# ]; v5 Y
5 v( E/ D: `& W) D: P! a8 i) Y
<template>% w7 ~) k v5 Z& H
<li @click="deleteItem">{{content}}</li>% I% }0 W. u# {
</template>
3 O5 H" y; b) n5 [( a2 E/ G: d d* _- Z
<script>
6 U' x7 v v& f1 ?. U1 Y6 ?export default {
8 r. Z0 t$ w2 V" s7 H) `7 H5 L props: ["content", "index"],
! x3 Z$ y9 ~# c4 c* [7 x data: function() {5 {1 s2 g. T0 W" H( [ ]9 x
return {};
! X0 H P; o9 {7 I/ w3 r },; K2 T o" _ `
methods: {# u6 m+ C, T6 P+ A$ A% s! i: i
deleteItem: function() {! D+ p; G) E* I* X3 U$ k1 E$ b
this.$emit("delete", this.index);% h+ M9 J, _$ ?- l# J. Y; j
}
4 W: {( w6 A. i _0 S0 a8 u }
2 V P8 Q! R9 p+ t8 C};: a% X4 k) o9 o% g1 B6 `0 P% l# ? ^* G
</script>! w; T7 M: N4 I
6 k+ v+ E3 z7 Y7 _: g
7 s' N' o/ o5 l C( E" t$ v2 C/ {+ E& q" _: W( w* h/ z
, u, Q, h2 @ s2 P+ z1 a: [) `/ S8 A. U |
|