|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
+ ?* n' n% o) s; ~
' J0 A7 [0 d, o( ?2 e" O3 n8 S/ R/ B/ N( d
, f8 Q; o% V+ o% {4 D<template>
# e) v6 Q: L/ U6 ]% U <div id="App">
0 |# H, }+ r+ ?* q0 V <input v-model="inputValue" />! ?& T# b* q, z! D+ r9 x. W
<button @click="submit">Submit</button>
: y8 d3 C! z7 u$ Q' H* r <ul>
+ D, T: u4 g2 k$ r+ E6 z; C' z <todoItem
1 v$ M. d1 T; e7 t& M( U# y( Z v-for="(item,index) in List"
9 Q7 J2 X6 v3 M( ?/ \ :key="index": P9 y2 B$ a8 P! X. o# W
:content="item"
8 x, J2 Z& T; T z; w5 H :index="index"
' B8 |+ [( \5 r2 m @delete="handleDelete"
: _. C' A/ v- e ></todoItem>8 T3 A# @, J" J/ q+ t# M( U
</ul>6 {% `1 O! \0 R8 w8 d
</div>
6 j4 S \6 h% }0 T9 K</template>
, e1 y8 S4 x# ^( n$ A
) K* u& o1 |2 I6 i, w j0 _<script>" K( h' p1 o0 q
import todoItem from "@/components/item.vue";8 {+ ?- V+ ~) i6 l4 G1 ^* s' _2 B
8 D+ Q! P; P! E3 @: Zexport default { X7 k; Y* w, a
data: function() {
6 Y: J3 G5 [+ i W return {
7 k) |3 W0 S3 p% A' ^( Y, E List: [],9 ~) j8 d+ K4 E+ p3 w2 M; h
inputValue: ""- _8 O4 {9 t, k6 V5 D" x& y
}; O: c" x3 g5 _) U
},
9 S4 i9 q3 C, c components: {7 x; S: U/ u- c' T
todoItem" y+ \6 _. Y9 V j8 p7 d2 }- F
},0 T. |7 p k3 m* d v U, r1 o
methods: {0 o3 r, H) V& g: t
submit: function() {
$ \' M: V; D, }. K% g) ~/ ~- k if (this.inputValue != "") { T. f1 {) k8 B7 M% ]6 C" ~
this.List.push(this.inputValue);6 ~& Y9 e' J1 v( Q0 h: G& D
}: U9 `; h/ T" ^) ]2 \
this.inputValue = "";: @) e+ [+ L; u* M8 [$ O" ^9 j+ ` u' i
},
o- r( H+ q: L1 a: Z( p' ?" q handleDelete: function(index) {
, z; y, V( `' o |" ~# G8 w this.List.splice(index, 1);
: i5 x; k0 }" C! x; k! g0 ^ }" b4 }( k t3 z! t* Q$ H3 V0 z5 g
}
9 p+ v- {) C2 y C};, k0 u' I" g) R9 H! m9 }
</script>% i' f! c5 t: \0 U' O) X% Q5 [
. h$ Z; r/ ?8 {: C& q
/ b( p6 e) l8 A" p" i* f. Q
4 t' W% D' n. P+ ?+ O4 t; j1 e- j+ A# B8 ]- ?
: W+ g2 h' _- P8 c- y! A
) s- q7 F8 H: S" J8 x9 {- @. c# m6 c1 O2 Q( R9 j
<template>9 n. X7 F/ }& C3 A+ j
<li @click="deleteItem">{{content}}</li># h+ N9 ~( |' Y2 t
</template>
5 r" R( z+ y5 x& Y
9 \8 \1 k* r; A2 @- b% A0 j# E<script>4 Y8 D. @+ l) X. f5 H2 p
export default {
# l2 `- x8 Z4 k7 t- B: m0 L props: ["content", "index"],/ N2 u. m. `, {; u* L; d1 ~
data: function() {
# ~) }5 X0 O7 s" v( r return {};
! t! c2 Q) k2 d# Q; t },! r1 O4 p K& t* L2 a& |
methods: {1 W r! f' k+ @. u# j; C
deleteItem: function() {/ v# v$ [' K8 a6 F/ E/ U1 ^
this.$emit("delete", this.index);
- Y: @; J) T9 }- j }
+ D% j/ r/ k1 J! ?$ ^ }+ E# P# g: t. q- F
}; e" i2 A1 ^/ x& z" c6 R
</script>8 o$ ^1 T: p+ Y N8 A
- ?% o/ F, f& x4 ~6 ` f8 H! q9 q2 ~5 D% H% W
" w8 J1 V& ~! V, z Z0 } n
+ n/ C$ s# K7 E' ~# [8 i |
|