|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
. B0 W W5 d$ g: F5 P y8 M% t
+ P* s- H: f" I9 a. ~1 q7 h) Q
7 @$ V" [! ]; K7 f5 m) K2 u4 E1 d. F4 x
<template>3 V& r' A7 v5 c+ ?) M# n6 Z1 i
<div id="App">) N+ a' \" }- U- m; V
<input v-model="inputValue" />
& P# R$ V: r; `( `5 u! T <button @click="submit">Submit</button>
5 W+ P$ B8 O: {/ v5 Z <ul># k4 ^7 R$ S8 N6 K* L! v, Y# i
<todoItem& ?0 N. N3 v7 a: y' W
v-for="(item,index) in List"
% z! @7 w5 J: y3 _( y :key="index"
% \) ^8 K. R7 k2 g :content="item"9 p4 |( v% v9 w5 E: |4 V
:index="index"7 `: u% I8 z k: B# U- Q
@delete="handleDelete"
8 R+ c) ~+ Z% a/ i" E ~/ x ></todoItem>
! `! {, D/ c1 V# ~& O( j+ a4 B1 [ </ul>
. ^. X/ v7 Z/ @$ X, ]# p, B </div>
: s) `/ z W9 v) _* g+ x0 a1 z, v</template>9 S3 B$ C' ]8 I+ z" B$ U* o
! K, ^; d) {( q<script>
0 J0 a1 t( W% L& E4 {$ v2 `import todoItem from "@/components/item.vue";+ M6 ?( P( q) K
" q3 A& P' l- _8 p5 f
export default {5 U; W6 B2 [8 z; X( Q
data: function() {& [# ^4 @+ ~% F+ u8 A
return {! d, J$ `( |% y
List: [],
; ]" p5 S% R, F4 {+ w inputValue: ""
; ]; F z& c c% w };
% {, a7 g* J9 r }, L9 ?; H9 L& G
components: {
; \9 ~ W8 [8 N8 E7 U2 u/ W todoItem# \& [3 Y1 d) f. S, b4 O% V e
},& g* K1 d) Q' x' ^& c
methods: {* {9 G8 q: a* F3 k, S: c7 y) E
submit: function() {; W; K, D& {9 p0 D7 C' ?
if (this.inputValue != "") {
) W( E5 S* h% q/ d/ w8 z0 ? this.List.push(this.inputValue);
; O: [) O9 X3 [" ]& o6 W! {1 n }
4 ]) |( }& h+ n/ {% _4 \ this.inputValue = "";4 \6 j; w0 j5 Y; j( |# C
},
' {- U' h& T8 I& h handleDelete: function(index) {2 t ~. }4 h. }0 h2 r- U
this.List.splice(index, 1);7 N1 q. e1 C) v+ S8 ?
}
, k- T4 L' [( j" w# X/ q8 V O }5 B2 z- H( ^! X& S# t
};2 D3 f; Z4 F1 V y) G/ J; j
</script>
1 V, y. Q" |4 w
% O8 M" C3 Z- l3 B( V) J
9 K2 y' [, C- I8 n3 s' q7 }4 k' S0 n- m; X) n1 L5 v- q6 r
' h9 u, h: `' L% @5 k# f7 x
0 k, b9 Z6 k4 r+ h& L
) X F- b9 n* w. S. U" j9 X
d) H4 X7 U; U5 ?( S<template>- c& y4 P: Q% b" M
<li @click="deleteItem">{{content}}</li>" p" C$ \. U& ?* A' b3 f
</template>
q5 F T9 S% r* @5 R' o3 j& N9 P: U+ P8 w) S( A( v" K2 Y- }) Q
<script>3 R9 T1 C0 J$ Z3 d5 \) @
export default {
& V# i6 N6 I( ?6 \! C3 [ props: ["content", "index"],
. _( O" G5 |3 Y2 b data: function() {/ J! Z. V# l: O: N
return {};9 [$ U O+ X& h" s/ `+ g
},; L* e( N1 l, d" v8 x
methods: { s! O! \ N6 U
deleteItem: function() {
p9 b: Q$ i5 }, ]. \5 ?$ N) t: Y this.$emit("delete", this.index);$ i& {7 n6 D. ]+ v9 g B* w
}( m4 l* r) a$ ^' {7 q% k8 ?
}
% B1 `. v6 l4 F& c& g};4 j# O4 E. \+ k9 A$ |
</script>5 y1 w' h- _2 g: n
4 S3 Q6 x7 o2 v5 O, I
/ b- z1 u4 o J1 L" Y7 a
- x( A9 S5 |0 v6 @0 P/ ^- J7 l0 Y- j5 w0 c6 U9 k2 f+ |: y$ A
|
|