|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
/ k0 |% W" g) i; \" G( y* \/ D, p
) v$ M; q6 ^% P9 C/ r, l7 m9 @ N/ _1 m) X. g( D) a
8 {; [0 ~ ~7 E, a+ U+ v<template>$ ^3 ]% G6 h8 V2 `7 F# I
<div id="App">4 g3 o! a$ U: a
<input v-model="inputValue" /># t& X! ?6 D! l- R% O+ n' H
<button @click="submit">Submit</button>
x9 U3 A5 k) r5 ?9 }$ [: C* I <ul>* |* s3 J8 [; t7 d0 k7 O4 C
<todoItem
( s" ]8 ?9 T y0 r v-for="(item,index) in List"* s: d3 u5 w Z: Y& `
:key="index"
: l9 x$ |# r0 N :content="item"
9 T6 k' M1 p, I1 G7 X :index="index"
5 w/ m n- |# ]9 E! e @delete="handleDelete"" A* d8 B" h: f' W6 R
></todoItem>' q- f! a! m$ ]0 ~' D
</ul>
3 K w# H1 @: t </div>
/ ?$ b) p7 e8 Q6 N) ]" Q& Q& |</template>
' J0 d2 R2 [0 P9 o6 r
! i* ]# z: u, F- w3 f8 `<script>& i, K/ R. m6 L3 `! x; W: d. Y
import todoItem from "@/components/item.vue";
/ R6 Z" h) I+ d1 m2 r. p5 T8 C6 q4 q* A3 O
export default {3 ` v* f: R( k
data: function() {- A& y0 u1 L6 ^! k( @5 A! l4 ~$ i
return {5 e% R& Z) Q: \7 O$ l" O! q
List: [],: _* ^% w+ D3 k8 z+ E2 }6 z j# `
inputValue: ""
4 b, v6 c6 a8 R' @/ D! S };
( X# C2 G& g3 ~7 I9 x1 J; s% c! { },
! y4 Y1 P* G$ b" e components: {) g0 }" _" A* x' A1 s* v
todoItem
# ]5 v. l9 ?+ `% e },
) I d4 A5 U$ Z/ i methods: {
+ T( O4 O' K1 N& @( n, r submit: function() {1 }8 u) Q7 |& B1 \
if (this.inputValue != "") {
1 C: N F& t1 o# Y" |& k this.List.push(this.inputValue);
2 T3 w; y. X: { }) Z7 y0 d) b% d1 `! d
this.inputValue = "";! O7 M: k! |% z _+ X% k
},3 V" O. V( K: H- Z D
handleDelete: function(index) {2 j6 Q2 W# u# j0 ]1 Y3 P7 X- A
this.List.splice(index, 1);: F# ]3 `/ r; w& x4 a' \" y
}
8 _$ R% x- \) s; E i/ ~8 @2 A }
! f$ S' s. [ \ [$ c; _6 B};
$ w2 K9 @5 v$ z- d</script>$ T, p- ^3 Y* B2 y$ h
( V7 ?6 ?: ^% A
3 R% P( Y0 O& a3 Y1 ]
( Y0 ` l0 w8 ]
! N) W, n6 p+ g5 g% V p% t" d( e) V0 u5 c7 I. Z
& R! W9 j$ T" b$ {
# P( u1 C. O3 a1 H4 s<template>& |6 }; Y7 `, E3 U! {0 r
<li @click="deleteItem">{{content}}</li>4 _5 C/ L8 ?- M8 l7 H m ~5 A o! G
</template>
( o; Y+ N! Q/ r4 k i; _4 v
# _( h" g) o ?<script>
3 Z7 u% K/ m- I2 s/ ]% Q: jexport default {
5 x/ t' w% z* a6 T$ d props: ["content", "index"],
5 W1 |( H. Z; V data: function() {1 b8 P! y; m# E
return {};
; |$ }" O8 O( M/ h B( ~5 J' x },$ g9 l. y* C% F; W" u* k( Y9 D
methods: {
. ~) I( {% Z: V7 B9 a deleteItem: function() {
! w8 w4 `+ u- w0 t this.$emit("delete", this.index);
! s0 y2 f3 O' N/ Z0 Y* G) b }# W% {# q# `% ^/ L8 _$ y! h7 ]' Z
}2 s. A/ W1 ~; o4 `1 Q ^! S& L
};& I6 Z" d: a6 m0 O" F, j& l
</script>
6 \' y& b p: S, g+ z% U5 n; m' u& G2 K' W( R# W' J9 l6 x% `
; P# |1 O1 H( O% d \0 h# w' M
5 t! R" a8 Q k- ?
7 S7 [" S/ A: i" M4 Y |
|