|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 v" F8 l3 {3 ]
" {" T- ^0 m; k' [1 p* @
4 ?9 `2 R5 w0 i! ~: Y7 j, T3 \' {9 s! V, a
<template>
( \4 N6 O6 E. {$ g9 G4 o <div id="App">( o) ^$ {# R, Y5 K: g6 ] Q# F9 o
<input v-model="inputValue" />3 \; w2 P4 Q# E5 g3 P
<button @click="submit">Submit</button>
1 _% B, ^3 m5 c& L5 v5 a; c: o, \ <ul>" ~0 d+ f8 s* P6 J3 n! l, A
<todoItem6 y r; f7 R9 W1 O' I8 C5 B
v-for="(item,index) in List") I9 c. y0 X) t5 T
:key="index"
" d6 W7 m8 `9 ~$ o8 Y :content="item"
7 U. k0 Z/ G3 ?4 x :index="index"
. q$ Y) w# t; m# x" s# J( I. W7 b @delete="handleDelete"- V& `& N% ]* v) d* C0 U7 ], r) U
></todoItem>) h' J. k* y- [& {3 {
</ul>$ q0 l j+ ^, V6 Y# y* |5 y7 u s
</div>
) v8 c5 Q& k- o; Z( d</template>2 Q: c$ u: x( p8 w6 c
( _% E% e" g) V2 z
<script>* Z9 t) {/ ]2 g: C6 j2 s/ N
import todoItem from "@/components/item.vue";
0 a) ^2 j6 j, \8 B0 L" W% n
) j" o& T! |( p' }( Oexport default {5 b; l5 z$ z4 K2 t
data: function() {9 `, i- r6 h6 [
return {7 `# q' n2 h* I: y% [. u
List: [],) v( H4 B+ ~# l3 D* t# c: p6 ]
inputValue: ""
# T6 Y! e5 n4 O3 s7 P1 q };
# @+ G, h% d" K6 }( Z: j$ ~ },
0 k8 X/ \* T& S. k- u components: {
- m4 d4 M' r+ x+ [ todoItem
+ n# F/ c+ ]. }# Q e },
0 ~! Z5 J9 L: z methods: {- @: h* L' a, ^$ n& r+ N
submit: function() {
: a( P% q: f; u if (this.inputValue != "") {
9 D5 {( l* E$ D# t- V this.List.push(this.inputValue);
7 e4 s6 F' [8 a6 N, V' T7 L }5 H9 T" q+ i& j' A3 R
this.inputValue = "";$ g* C6 H& B% h
},
, I! H8 u& S/ c+ u, B, Z6 t/ N0 v' J handleDelete: function(index) {
; @: n, C& B/ _2 ]7 j. L$ B/ @ this.List.splice(index, 1);" x0 R/ x8 V2 d" |/ x' a
}
( R! \4 I. ^% j# ~$ ]; R" O }' E5 T# R1 {0 U4 E/ x
};; G2 S% p& X2 c8 O
</script>, `/ t: l# J. ?
' K, |; T3 u1 x2 C' i: x
0 I" w7 m. U. `; }# e. a: v
0 D Q5 X: U, f* f8 I. x" D
' u, k- |! ^/ o* g* f9 a
/ F+ B) ]; x- X$ s
$ x) P" g: _4 |% w* D# i& E0 n6 i1 p x/ U# e2 w
<template>
7 p- M% J- u7 a1 Y4 n <li @click="deleteItem">{{content}}</li>
6 l o, f, A7 u, u8 `" ?( |9 L</template>* i5 b* V6 Q& `7 ^" s$ H U5 l4 o
# p; g+ t- R8 b0 P<script>
. p' |0 e; q" W8 o7 aexport default {# b0 g8 O% Z0 T1 ? u% ^" {
props: ["content", "index"],- M3 w$ ?+ S% f# c
data: function() {
; B3 s# ]7 G7 X8 [7 A* K. N, W return {};
R+ S/ b# T$ g. C8 G9 n/ W+ [ },8 V$ d8 U' B4 ~6 a; O4 E
methods: {* j& |+ ~* p: H
deleteItem: function() {
1 k4 E, T5 M: Z& S this.$emit("delete", this.index);
2 |. H, E) k# J. e6 @6 B9 h }
, V/ [; S: W/ G# V! X9 W }3 [* _) [8 @3 T* ]
};0 Y# P" k: i; [3 L# V' f' X# N& [
</script>
" i- _1 h- B9 x
" z: ?* h* R# r8 P' n0 Z: A3 w( q! R4 ^7 K G+ V( S% y
e3 z) y( m- X1 E
& h/ A. d; W( q6 K! O |
|