|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
7 _" q% c4 q3 u( K. m
3 r( n; U# D7 a. U% Z$ q& e
3 d; f0 h |4 A) E
( k0 I% o' r3 L: e' `<template>
5 I8 _2 }& Q7 F0 D ^7 Y, x <div id="App">
3 }6 I, g6 u* q) } <input v-model="inputValue" />
2 T- ?7 I& Q: z% f _ <button @click="submit">Submit</button>
. s6 H. ]! U6 W! B1 ^( ^ <ul>
. O6 w6 \, z+ E <todoItem% f, c" w, Q, A' K L# v4 [$ p" {
v-for="(item,index) in List"% \3 q9 A, n. _! W
:key="index"2 n! A/ ?& o9 C% I) o5 L
:content="item"; S* S) g9 W, |1 i2 Y
:index="index"
% ?. d! {! x, z9 E. a$ V' s) D) W @delete="handleDelete"" r& w- N( G6 r8 g
></todoItem>
$ ]9 a5 y/ d; D% C2 a! h </ul>
3 U5 v `' f* u9 ^9 F+ F( A% M </div>
z+ r' I9 |! F9 N/ w# J. E+ D- a; y</template>
1 ^7 U1 c! _; @1 U. H% t. F+ ]4 b
<script>
0 u. Y# F3 z* b0 f8 u) rimport todoItem from "@/components/item.vue";
& r1 l# \7 R) D
7 J' W: k* ]+ g. d% h+ Q6 h8 q% Yexport default {3 W0 ?7 c+ E# m6 z& }1 C
data: function() {
+ s% s( d9 c! K3 Y8 Q/ _% N return {, B$ ^, c3 |5 Z. r% P1 H: C* y
List: [],% _& O$ W- m8 `
inputValue: ""4 s4 Y- ]7 g( w
};/ Y( f: t) y3 O- {8 x* K: L
},
* i: Q7 S! `, {$ H* r components: {
( L7 Z) r0 F5 ~+ F# \% ?* S2 K todoItem: b2 U% Q2 J2 L, T6 A
},
5 M2 ~" s% X/ ^& ]; J methods: {
: l* x" I2 k5 X0 V) q6 q submit: function() {+ l6 d1 K3 g9 K: _
if (this.inputValue != "") {$ t% |; ?. j6 l+ i6 T) p+ e
this.List.push(this.inputValue);: u* ?9 {0 N' h2 i8 Y
}
* T; P6 u3 n- c) e this.inputValue = "";/ O1 }( r! a6 ?4 ~ r8 i8 c
},' w% t: h, a5 F3 ^- ~. A! @! ~' M
handleDelete: function(index) {+ A4 s8 `+ g1 P9 W; ^ [5 A. J$ ^
this.List.splice(index, 1);6 ?8 V( B5 o, \9 F' T1 i
}1 }. @% |9 v. R
}) X: B2 p2 t W) Y5 d/ v/ M
};
% K; v. b6 y7 O2 v9 P$ M</script>4 v4 b+ r; Z4 B4 N4 y l7 w
% p$ C. F, Q1 G Z
# S8 l8 l# s2 v
0 S* b: e% X0 J$ H. t5 o0 o
: D3 O+ R) @2 T9 e1 l% W5 o9 M3 c: @7 H# w) \8 O+ b6 x0 d9 c- o: {2 p
9 a0 g- Y2 G! ?8 ~! _# X+ V6 h! u- u* \$ O% S
<template>
" V3 l: k" z% ?9 `. V( l0 V <li @click="deleteItem">{{content}}</li>
% N. a; P4 Y, r" w2 D$ u4 `</template>
7 t5 [, p! { }1 q- O7 g) M2 y, J/ p; x* d( X
<script>
2 C7 E" y0 ]. l7 ?3 B; K- Pexport default {. [* i+ N. \! y3 ]4 ]
props: ["content", "index"],
/ }1 P" r: M+ \$ p- E8 v data: function() {
" Y$ v! Z9 P; p f6 j1 S! {* \/ ^ return {};2 U0 Y: J: }0 a6 z) d1 T
},( X: C2 m( p; y2 W* S
methods: {4 B* c/ d% F: S1 x! P# d0 k
deleteItem: function() {9 @' ^% N1 x) ~$ D# E, B# e8 F
this.$emit("delete", this.index);8 H* s/ k3 E. G# U, ^
}5 }9 m' O+ A6 T
}7 Z( O4 v6 q# s' [% Q
};
6 ] W% N( L2 m</script>9 r( c4 O' r+ w+ u6 T
, I! N7 o+ Z+ g# U7 X* V Q5 Z6 n2 I& o9 F" A; M* a; j, d
9 m& n/ M0 k' B5 p w% |6 P6 E7 i, N5 E: S7 F Y+ V i
|
|