|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
% l9 U# E- h; j& g @
; c) d1 m% z- G# T1 h. N) b+ s! j, s# g0 z. G8 }3 N8 n
( X% w1 H1 m. n0 y
<template>
k; h4 i' A- e0 e3 k" E" x <div id="App">
- _6 O: R8 u4 T: D' W" t <input v-model="inputValue" />
! K& Z) B5 y" Z8 u6 x <button @click="submit">Submit</button>
) c: O: @5 I( x, y G <ul>
i( w2 |5 V0 e# }7 S <todoItem
: r' n. K \. e- v% M' n5 u v-for="(item,index) in List"
! a# t7 u% O" g: |6 J :key="index"
0 c4 F; h& n7 m+ m! w8 L :content="item") a# ], _9 [+ G6 N6 R2 J: ~. n
:index="index"
+ [8 H4 R/ l) h+ a' ~ @delete="handleDelete"
& F5 ?/ P: M% ]8 V9 l% g, K0 W5 z* w* ~ ></todoItem>) W6 ]; _ i' p* m# h+ o% X
</ul>
?7 q$ z$ w3 O, i8 ^7 g </div>3 T3 w6 O' v9 v% x5 \7 W
</template>; ^% H6 ^" D/ x6 f% l0 V
8 ?: ^3 p1 o" |; X<script>! H1 s; ? h& |7 z$ }+ t& D% E; ?4 T% W
import todoItem from "@/components/item.vue";+ H) j- E+ t, \) x8 q5 M
# |6 _5 M2 o) w7 ~* u+ Y$ Qexport default {
+ u! B' Y. _) N: Y data: function() {
0 V: B$ {' F# M, `/ P k return {# o" y# d" B& ?5 ]3 C, G
List: [],# A* ~& P1 L" D' `; `& W
inputValue: ""6 s* b- t/ E: y
};
- ^# Y2 e3 }2 h; L& {- b },) W4 _" Z: S- H5 N, {$ H) X
components: {7 |+ @5 S7 q* o" U4 z M- L! t( k
todoItem
6 u- P7 ~4 S& Y! {; {/ E },
0 p6 \# A& y: U0 D# s1 v methods: {
$ o; c- i- j* z! R6 f submit: function() {
* s3 l& H% ^* s4 \0 E if (this.inputValue != "") {/ w1 W$ ?9 n: l0 C" l5 P
this.List.push(this.inputValue);
; o/ _% N, R3 C& a8 n& \; ` }& F0 X4 i: N8 g; g" n, M
this.inputValue = "";
/ r1 m" N3 g, s a5 t- V },, p' H" Y' s# g( D. F; S; z8 x
handleDelete: function(index) {& |. O' |3 ?1 s' L6 Y
this.List.splice(index, 1);9 U4 D$ ~( Z# n9 F% ]- Q/ q
}
8 d7 T: Y& \+ [( [" g }
4 a- h' C( ?% E0 ^! M& t};
9 u' i2 A8 I$ D- R: o0 I' i$ L</script>) ^4 P% B) ^+ o$ z, z) t1 o4 y
2 A6 d1 `3 w- R" _9 f; G% E; I1 r# d
6 z+ o" ]8 o1 I- l
- ?, ?" S, b) o1 p; r& i' i+ f( _3 _* \7 O0 X# k7 f) [
+ @+ }' t. m0 t" @; |/ G
6 V% ]6 u- P$ s6 b+ z( n<template>
6 L3 R |6 c- y6 F7 y" M" k, L <li @click="deleteItem">{{content}}</li>
- Y8 y. E. V% y) z</template>
& V9 B* r4 F9 Q* a3 Y. V
$ Z1 i* r9 Y% q/ Z2 r<script>4 [/ Y: Q3 A7 }& \' y- x
export default {
1 w: _$ `, W3 ` props: ["content", "index"],
; m) ]9 d; H C: F8 L) _2 e# y data: function() {
* Y. z# b: \; N( J return {};
* |: M. s( o+ I4 U+ v- f },
1 U& Y9 K( F4 a7 V( h methods: {
5 w: E* z3 q& ?3 y, C deleteItem: function() {6 l# Q; D0 H6 Z5 J9 I" @/ m
this.$emit("delete", this.index);3 n, R" \" e0 \* G, E5 ~
}
0 _8 t( s& |2 V* L. B% f }& m6 I9 r' u! s4 s/ [8 o
};, O" M( \7 ^' i6 c V
</script>$ X7 @! c' [% W8 |# N
- Y2 n& h% K. e) r% l i: O( ^) q
' L$ ^- e" C) O" j5 Y8 K8 P- h+ m$ g9 T3 X, m
1 r* v6 @) R' B6 ] |
|