|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
* j/ F r, ]2 o( E% B: E+ ]3 w3 V7 r ^
; v2 \, F0 v# R8 k9 h5 n. G# {4 |8 y. z' ?
<template>; l) Y ^$ l" A2 y- B" L. N
<div id="App">' V5 z1 O! L- b: S- l, ^
<input v-model="inputValue" />
- C4 w2 u( B% x6 j3 w$ ]/ q <button @click="submit">Submit</button>
5 T8 O9 X+ `4 ^$ H7 v" W- z/ C2 Z <ul>
- H5 j; r6 ? |) G) r$ I" h" u <todoItem
6 }% ^# V) J( c% U v-for="(item,index) in List"
2 J1 L; @' V' V0 t$ n :key="index"
" y+ C! l! |; ^6 X :content="item"9 W$ c0 r' j: j, Q* I5 _1 k3 u
:index="index"5 _* k% J9 Q3 e, [- @
@delete="handleDelete"8 @0 s7 u `0 k# P
></todoItem>/ O! @' w* v. Z
</ul>
, m# {3 {! O/ Q </div>3 ]! _$ w, Y: N2 X6 O
</template>) x4 R7 V1 G. K$ ^+ `
- O9 o F6 o8 M+ N+ N
<script>
4 Y5 y2 @& y! a( T7 l3 F Nimport todoItem from "@/components/item.vue";
! ^0 }, T# [ w; m; Q' s
3 }* G# f8 h+ |/ t/ |$ e+ A Xexport default {
( I5 H* Z9 I3 q% k" O data: function() {
+ r ?7 ]) f# }2 I; \ s, ] return {
$ y# T3 i ]' N- D7 e; P List: [],7 t r9 c Y. `6 j2 w
inputValue: ""( d) u! [% X4 p4 j4 `, y1 p+ K( h
};- `/ z4 E9 n' l R7 z. E3 e
},
2 k( j# \- y: m6 m- k; V components: {
5 A8 x+ C4 C9 o8 k$ w% m todoItem
' Y2 c& e; F7 W* ~4 W& n# L },$ b5 H! x+ `4 Z) _
methods: {
* m7 K- ]+ O, x! G- Z1 t/ I submit: function() {# d+ U( V7 ?" J/ E) w
if (this.inputValue != "") {4 w; {# Z; L. m/ b4 x. [
this.List.push(this.inputValue);+ \" a; r: }" C9 ]0 f' ]
}
% Z% S; n* W9 i- B8 `) H) [ this.inputValue = "";
3 U8 G! [" y; T },
+ L/ y0 R6 v! D handleDelete: function(index) {
2 z2 N0 \0 D8 d7 g9 s this.List.splice(index, 1);4 B. x% w$ {8 g7 H( i8 E
}
' F3 J7 B$ a/ a* V3 P# M }2 B& V# q4 g$ o1 C# Y
};0 {8 u0 i5 s& v- |* Z( f5 ~
</script>
( \. u% K: ^# }9 @9 u& M8 J% J/ y+ o- [3 {
' n+ l0 p8 I- y; y* h5 v
/ o7 c" U2 \; O# ^, h5 O. @# ~, A) m4 S( X0 e/ ]
) T3 Q5 e: q- L. T
' N) ~' f" b+ [7 O; v8 I7 w. X* y$ [
<template>
) ?* j% o9 j4 \' ` <li @click="deleteItem">{{content}}</li>
) I( @; y3 B4 ]* a</template>
+ o$ L/ \6 x. O8 A/ M! N
O+ \( n3 l7 ^! J, o0 f<script>7 n8 }% t% O6 J/ D7 N: u
export default {
8 V" m* b+ K6 y. A" v4 C props: ["content", "index"],
/ S. n& T7 p& t/ k data: function() {
, I3 B7 N) Y( E# t' h$ o4 F2 u return {};. o" p {& ^' X
},: S; ?; i/ m; c9 p
methods: {# W8 Y d( Y, F/ d" h: n
deleteItem: function() {
6 ~" T9 S1 n( T1 X# o0 d this.$emit("delete", this.index);
( D9 G1 L5 n3 E3 A2 o8 I9 p0 a }
7 a; G* Y+ J7 n9 n } L, l: L8 d T* H7 h; C& S
};
& D: h& v4 B4 C) @</script>
( f8 g2 x3 ?7 |
& v( u5 u5 E3 r/ | K
6 I7 J, c. h& x/ H% D8 e$ k5 J8 D$ t, E% B5 z% V8 r4 h) v$ w
/ c r& g: v0 R, K/ @: h0 D
|
|