|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
5 h+ d/ ]3 I6 u
# v) K: m1 @6 r
- `" x& H, M$ O+ N
1 \) i$ f1 ?" d/ Y<template>
) W; W$ f3 a) R1 z% k9 _! H+ T <div id="App">
! L) p3 \, }( y$ n# j+ c( ^1 ] <input v-model="inputValue" />
. }. Q- G3 \. r& i4 ~ i <button @click="submit">Submit</button>
; ~6 Y H4 f6 ?4 J9 X3 U* X, L <ul>8 n$ o/ S% T6 T% u
<todoItem0 X2 v' w4 v" M- c9 G
v-for="(item,index) in List"
. m& \7 B: x7 v0 H$ ?/ M :key="index"
3 h) H; W4 }4 ^' Y# u% y' P :content="item"
8 [; L" N% S }0 g) X; i* [ l% G S :index="index"
6 D& E: I" I( C0 U+ h @delete="handleDelete"
5 ]6 R4 x$ @. ~2 v6 V4 M* l5 t ></todoItem>
7 N7 g1 N3 F: r5 E$ u% D% |- W </ul>& c' ` l/ ~: |! I
</div>3 `! F- V0 b- ?9 W3 R2 P" S
</template>- z/ r* C2 R2 [; W
' x0 f$ ^* Q- p! A( T, C. D" F<script>6 G" C+ n# E# P
import todoItem from "@/components/item.vue";0 N$ |$ s1 @0 p; p2 F
3 E# q2 S7 r$ T, t) u9 o5 Qexport default {
0 N0 {5 X0 w7 x# ? data: function() {
" j: ?! W# z9 N" R6 q return {
* L! t8 i, y" \: o* Y' W2 S List: [],( s$ ]( u* [& D9 r9 j
inputValue: "". z2 c+ w' e4 U) e1 F1 b: w
};
+ l7 v* [' m5 D! \4 G( U },
. Z: |, @; N+ F components: {: H7 u" K1 Y/ F7 E' R* \' k, Z( I, ^
todoItem, b' t' N$ |, [
},
' M5 c5 m' u8 g# c, N methods: {
6 o. V' t4 a3 m! F" P) [, i& G- \ submit: function() {6 {7 S: [3 W" f1 N9 h; k
if (this.inputValue != "") {* ^5 C4 r5 G8 a( U8 r
this.List.push(this.inputValue);
/ e& o( Z: a/ W3 E' r }
$ d& u v% g1 F4 d9 ^# r; i4 H this.inputValue = "";4 Q u- n2 q2 u9 e
},
9 t ~* B( Z: w' x8 } handleDelete: function(index) {
( n" T/ h( V6 u, W; F, B3 @) l this.List.splice(index, 1);
p% m8 n) {! }( N) p }
6 |9 B: k* [8 l0 E9 X9 B }
8 G: c5 ^8 n: Y' A};
g7 j& h! _" `* N5 M7 X/ D</script>
) O$ f Y) H% x& ~5 p" I& \9 x) s0 Q) q$ Z4 K* ~2 R; w. s% `1 m
, o" J c8 M8 d- r' q9 b
7 j% x9 `+ x4 \8 @) f0 L; B x# h1 A3 _5 F1 h3 B
4 J% r* y$ l1 { G
/ e* ^ X% o+ K' u" U) S8 B
) @- g0 X# U* `6 l* I
<template>
( N4 Q+ g& x3 P <li @click="deleteItem">{{content}}</li>6 F. D. I0 N% d/ a6 m' q P1 C
</template>
, A0 s8 r5 {. p& e1 }4 y7 y
* r; E( F: r- v" S3 \1 T5 c<script>
' C, o, ~8 F5 J6 k- M7 f& Y6 oexport default {
( k9 x! G* B( l) ?1 F+ W props: ["content", "index"],
- Q, _% Y9 T$ M7 @ data: function() {
# D* g& u0 }* w" @+ t return {};* S9 w$ j1 x- r5 c! f' v- Q
},7 G* ^; ?: P) V0 m: H* x
methods: {
6 ?5 h5 ]) Q4 ^4 t' b deleteItem: function() {
8 q% l, @: e- a* F this.$emit("delete", this.index);
7 V& W! ]6 R1 L }
; j5 P0 L1 ~7 @2 \* w }# x0 a7 ?9 c* N
};+ ~+ d S' V, W" K
</script>
" T6 d. K! _+ ^, P# Q, J9 y, X A; W4 w: g
! \$ i( R* o3 V5 y4 k7 g$ m/ {; r, a+ `! u" D
n6 g3 X) n" X |
|