|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, ~. O4 I4 R; j; P# F
$ y' Q. z* J7 M- p0 M
( {( J6 g# y$ x! v+ p4 v
" u& n+ F2 Q; ?. g) r5 @<template>+ b1 K: b( W3 ]. X
<div id="App">
! F, ]* L9 v5 l j3 U7 } <input v-model="inputValue" />2 u; R2 b B$ ^, m4 q5 w4 W. z
<button @click="submit">Submit</button>* d8 ]2 c7 N2 f+ {
<ul>
$ e, ]& D- @/ O <todoItem
4 v: Y- s- t6 @3 L" x v-for="(item,index) in List"
1 S5 x1 W3 w R :key="index"
8 U) {: R& T! V) v- e0 z( g :content="item"' s) {* W) i" |" x: @
:index="index": e! o# Y3 X1 @9 [4 e6 e! g- w
@delete="handleDelete"$ i4 y4 m; }* {; X+ j4 B+ K% ^
></todoItem>
& n/ ~6 c4 U0 D5 k </ul>
; m1 b" x; Y* J </div># n+ M" g0 Y5 v( H8 k
</template>
; R0 _% m4 }7 D3 g- F! t: S
' R! O- ]! A1 h) @1 t" B! ]- p<script>' |( h; |! T1 Z; p$ Q4 x$ B# A
import todoItem from "@/components/item.vue";! Z: j% T* O' n; g" p* T; s( J
C# {# z% q! A. x& @" |$ g2 s0 Eexport default {5 ]4 r2 q \; n: R/ n& b1 G) W8 K0 \
data: function() {
- V0 `) d( O% B! F) X return {
: E9 N( O7 x9 r$ `6 F& o List: [],
6 b# z. v N, _- C' C( n) V inputValue: "" n Q0 ~2 z- Y4 _" J& O
};( D) \# h/ W/ j
},
7 b; B6 t- v" H# _2 J: M' K components: {" B, n1 Q5 [5 G6 c# r
todoItem
0 u: t/ c, Q# h" c7 o7 E },
5 h) l( x" Y! _" I. a0 I4 p methods: {
5 S; R+ U: l0 M/ q submit: function() {
" H9 i1 H1 y! |1 n6 l- A if (this.inputValue != "") {- C# D- @. e7 g0 R& Z5 U( [1 H9 {
this.List.push(this.inputValue);# U' R8 {) ~8 R7 L2 O* | p. }# a
}
5 {/ F( h* f& ?- I3 t2 I this.inputValue = "";
6 [/ L4 h* E8 Y& o$ F# t },
{$ Q4 ?& g! J' [ handleDelete: function(index) {
& g! |7 g& V8 g1 C' \2 W0 ~& z this.List.splice(index, 1);
: v W; ~: E- X; B: A8 Y }
" ~" y( d* S/ e4 G }
; g& z0 f+ n- e$ }; [};
- {5 [+ k+ h0 ]2 J+ a</script>
0 q# w; X+ q) X8 z0 W o8 s: T" V: @% ?
+ O7 g1 c* k/ |1 p2 s' j" u
" D% z: l+ g# W/ d( H* \
5 q5 Q: u: I" ^" A# @9 o
/ e& B- l+ N. x- O0 \% g6 F. k+ c2 Q- z( x
# Y. {8 V, ^# q: O2 ]' V
<template>5 E. s3 ^3 a/ Y4 w0 h( }
<li @click="deleteItem">{{content}}</li>3 ]9 g0 F! {; F: Q' k. v6 i2 d
</template>% p# q" h/ v, V) r' c0 e8 u" M
+ j w- D( }4 t& u8 s0 Q# X
<script>8 j+ ^# v- e4 U- X3 N* {. a: p
export default {
0 A: H6 u q$ p% C props: ["content", "index"],! P5 q! L2 w, q. n5 @0 Z+ H
data: function() {
/ W2 z+ l8 b! |- K& g return {};
8 }( M6 o, H; U; A },
6 [! r- W: H5 S; G methods: {
. v& o4 I5 C8 F deleteItem: function() {0 v; f p+ u8 I; F+ ^
this.$emit("delete", this.index);. f, |/ D! K, l9 D1 z2 a6 j
} M+ [4 c- O6 Q* }+ _; B0 S) i% i
} z/ g" J* V$ H7 p# t, g) I
};
# x' {" V" P. x5 |. [</script>* l. W5 k" K; B/ {3 h. g
) F( H( H6 q' @
~9 Q9 }" `6 c* `: W
: R) u; Q+ l+ q2 d: ~7 d+ A( O
H4 C0 b0 l4 B4 M# \/ L |
|