|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 x! I x/ o5 `% V% n5 |6 z9 ^7 G7 ^) G9 m' x/ j6 l$ [6 p
, B+ }) q7 p% Q! j @/ t
0 M" M5 \. a6 x( p<template>2 E. f" I. [2 g' B. @+ B1 {3 p
<div id="App">
. Y; x1 o) I3 I& e9 _5 \ <input v-model="inputValue" />
3 s. g% B+ y% j7 H6 y, | <button @click="submit">Submit</button>% D% i5 a9 i8 l" {5 ^7 C
<ul>) S9 O. v/ d1 _0 f2 h! c
<todoItem% ]2 U. j" l7 k& R- i
v-for="(item,index) in List". h5 p `6 Z r! q. ` A0 L$ m
:key="index"( k, H7 ^" U( \- ~
:content="item"* }$ f+ i$ ~* z" T
:index="index"; G, Q' H/ z4 I5 U& {/ ]
@delete="handleDelete"
$ N$ s2 L8 X' i( P) S ></todoItem>* U" N% U' h. _6 F/ o9 x' b
</ul>
, i- ?/ p6 N3 N </div>
; v1 W) r2 J# z/ I8 z' C</template>9 K. {8 t+ ?2 L Y
m' H. I) b1 \3 m9 I<script>
! U) ]& ]2 G6 t$ A2 y( {, ~! Oimport todoItem from "@/components/item.vue";
7 R( j! y! T5 k/ e/ ~# `
6 J. F1 S6 ^% n. A: r" Y6 \export default {
9 @+ G, J; ]$ U0 w data: function() {
8 r, P. y0 m/ }4 o5 x return {
! M* Q! S3 G3 O List: [],
1 |) ~, n* F$ G' t" g5 d inputValue: ""% z: X6 o8 p' a$ ^
};
* T. S5 k0 X# M/ L },6 G# Y: v6 x* H7 _
components: {
, o9 _. R0 A4 G1 i/ h todoItem' f8 z- d$ {" a# J) }
},
6 f% u4 X! p$ i: {* r e. q( Y# W% \ methods: {* D! \! k, ?1 |
submit: function() {
. [' |) d9 S4 I; Q7 W if (this.inputValue != "") {# R& e9 p( e. R
this.List.push(this.inputValue);; h; ?6 r& I2 V' ]
}& k3 u: H, m+ D( M8 o) u: W- D/ X8 E
this.inputValue = "";7 J+ b$ Y3 D" B6 O$ h
},
2 j/ ?! ^. I p handleDelete: function(index) {' k; p5 ?- z$ B3 F/ U- A+ {- \
this.List.splice(index, 1);2 F% _$ w: }4 N5 E1 J! u$ @. q) R2 _
}
. o0 }$ E Z( k. \0 w) r: { }7 F; E0 [& @0 a8 j1 _! S
};
7 r$ {; J2 ^. p/ Q</script>
6 `0 N/ |4 v, g% G( `$ w c+ Z. o8 Y4 Q p
3 F$ z& i" w$ B) z$ r6 p& Z5 a
2 ]/ a! r2 U" b0 h# u, v1 v- N
# L3 o6 y& _6 x" @9 z# v/ [! D
: u P1 H+ A% ^- h5 A5 m7 D( S) Q% ?3 R5 x
( K+ ^) \3 M% o<template>
0 D2 P$ H5 d; b* A <li @click="deleteItem">{{content}}</li>
+ o! H1 e6 r9 J6 V</template>; `! J' {9 Y! n" r+ c" ~1 L2 i* J
! }' u) p4 t q$ H' N9 {* d2 i C
<script>
& Y, [3 r7 @0 Bexport default {
( @! `9 P5 ~( @( V5 M, s props: ["content", "index"],' u# `& L* z, {+ Y" Z
data: function() {
+ Q1 a7 l% f' C, |: s6 Q return {};
6 r4 X( V! W- g/ F' t( _9 h& v },! Q' w. q4 ?$ u% R3 a( p
methods: {
1 M1 U; k" ]1 j P deleteItem: function() {1 ]# f. h! F3 j( u2 R* s
this.$emit("delete", this.index);; B! H& K* `9 G5 e6 t: g
}
4 o0 @ D) F$ j* e }! B- r4 ?# x! R
};: ~; X: e, D* M/ S1 }* _
</script>
. O9 X6 [/ F- \9 }( v, k: E$ P V0 u+ n" b! s: z
. X3 s# q c0 r4 S5 @
! ?( ] P) t2 A3 C
* y* N+ E6 s) T; F |
|