|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 h" M/ m8 T% t
1 Z* ~# i( e# _. s, x/ | _% Q5 z7 s+ r8 f
5 u5 S$ ?# Z: L, e/ Y<template>
( L: Y( P* j( W <div id="App">
6 H& f! V, W! U6 N# |9 @1 x% l- E <input v-model="inputValue" />
7 o: r7 q# v& ~- u7 | <button @click="submit">Submit</button>
6 }& q5 `2 A, Y! C' G <ul>2 H8 i- H' v" _3 K& U
<todoItem
/ J _/ F% X& g1 C v-for="(item,index) in List"
& {% z( g% I, g% H :key="index"0 R3 q7 ]* m4 X. T2 |, d3 H
:content="item"0 z$ z# q. m' k7 Z9 c
:index="index"
r/ O+ C% @6 ?, d @delete="handleDelete"
$ |. U O* T; d# m ></todoItem>
+ x7 J3 o7 ], W </ul>
* v, S/ U5 ^/ G( x </div>0 {$ s- j) \+ k0 o7 r$ B. y
</template>2 [2 q; U$ G5 s1 z$ @
S, J9 Q6 U; a<script>
+ }( T; A/ H- C0 O* X# ~3 Cimport todoItem from "@/components/item.vue";$ m+ ^+ c: S% p
; F9 u3 ~! U0 w7 F# q
export default {2 g6 S( \& Y; J3 x. `8 e
data: function() {
9 i6 x) u% f7 n return {
E1 S y6 ?- N; E! \ List: [],/ S: L: A6 y; ]; Y2 }
inputValue: ""
6 M; j- \' t- l/ M+ p };
( U% O9 r, G5 n A8 Q' W3 d9 J },
. P7 }# N4 N- [1 [4 }7 F components: {
/ ]! t) s- H- A1 `- h& s todoItem
8 V: q) P7 E$ _3 B$ r+ b },/ f5 m) U+ O& ~5 W2 m5 T8 B& M2 J
methods: {9 L; S$ q7 ^( G T
submit: function() {
9 r0 p: n9 O: X5 e if (this.inputValue != "") {
& @8 b8 p" x0 I" l4 S9 n this.List.push(this.inputValue);( F t8 s6 T% W% L
}
- S6 G3 L3 @$ e; y4 T0 N7 _ this.inputValue = "";9 N; O) a! e$ [" e4 }
},8 s) ?+ |2 ~5 X$ y& R9 F
handleDelete: function(index) {
& Q& b ]$ q# |! \ this.List.splice(index, 1);. C9 E5 w2 k. a3 W* h
}& T) O8 P. F6 L" {6 X
}
3 {4 V" s! F/ r$ c9 n};. [ P5 Z& h- Z' c! e4 N5 l8 q
</script>
# G% z ^& ]. H: G
3 L8 w h# J0 ~: v9 }$ z' ^, V2 m* ]; f" b' p) [: U
6 d# T# k* `+ D8 \( L
$ h1 u z _5 h# q" z" v& T# ?
; e& b3 \% Q& A5 [ l0 a9 `
3 n L) X* B2 H3 c8 `6 y& @, U- p! {4 ]" ^$ c/ x' }% {
<template>* E1 {9 f2 }0 u+ e: F) j1 e* t- i. U6 e% d
<li @click="deleteItem">{{content}}</li>
0 U, V- U0 I# p5 w+ N# H6 a7 Z+ H: i</template>
: E& w# a/ c0 m8 o0 ~
" a/ q% Y3 T3 d, i/ }<script>! ~& h0 J5 J! H" A
export default {8 A! n( O' m1 _$ {% j
props: ["content", "index"],
7 W+ n" X4 H$ F4 {2 X T data: function() {
! f, a! W" ~3 Q3 [$ u return {};5 ?! V, k! ^- g- x# X/ P. V
},
( @- R8 ~/ |' @ methods: {
7 _: x% l9 ` W( P: T deleteItem: function() {
# c6 h$ \6 H% }, s, ^* r this.$emit("delete", this.index);
( ]( M' z2 D" i$ ?; B }
7 t+ }% y; T$ }- u4 X( l: T }- b2 I- b& i! u. X: K/ V0 c( q) F
};
% E- E) r' T. L</script>
. r: F r5 V, P; c
1 F6 B; g2 P' f7 O& n+ p) I0 N/ u# e) a% t+ O* G
; q* e2 A% ]# } q% P5 y- T; M* u; f' ?+ r) o- }3 S: a8 `
|
|