|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" J- l* w' x3 h) {2 C* A/ C j' i
1 P6 Q6 M+ {- f9 s3 C3 g. @. j7 i) e+ v6 ~! I
4 | J6 K, x3 N) \ i6 {
<template>
! l0 p% V/ f h" k <div id="App">
9 d, _, Z$ s5 C7 C! k! X <input v-model="inputValue" />! I0 a+ B' Z# f, i" {9 |6 k
<button @click="submit">Submit</button>+ @7 y/ X9 w1 @' n1 B
<ul>
9 v1 d8 e$ }% Y <todoItem0 @* P7 r2 f6 _! ~* C+ O3 I) g
v-for="(item,index) in List"" a& {* h. L% r
:key="index"/ H) k) I _4 X) H+ A4 ]4 q6 U+ @
:content="item"
- u l/ N$ o" F8 L' m8 h :index="index"
. e$ @( U, ^, s. q) X @delete="handleDelete"
/ i- N3 z5 j" U) M ></todoItem>
+ e$ b: R# `( x# I% S8 Y </ul>* ^+ x- |0 X- d( F% i- O0 ^
</div>
Z( a% A/ z3 m& e* I</template>6 r1 [& x2 o: B7 ^0 J! j- M
* T/ Y& g( Q, [" b5 p<script>. v- H* G5 X+ Q
import todoItem from "@/components/item.vue";0 X9 `- t" y. M5 U
) L% _( {" R# @/ cexport default {+ f: S1 Y: z0 C8 F
data: function() {9 Z6 m- P: D Z$ x' Z
return {- a" |5 h8 y* t% W9 ]
List: [],
+ h! w2 g, K- X inputValue: ""! B1 i# Y5 N$ O0 n6 ]- U
};3 E0 l1 ~& [4 z `/ @/ D) C# R
},
2 |( u% m# K8 u& z8 E1 | components: {3 ^5 L8 L5 A9 T$ F9 ?' b; X0 q
todoItem
6 C1 w7 l; W' e$ ^: b7 Y4 U4 W" E },
) N5 C. e. v1 e methods: {, z0 S: r+ o3 @7 y' P2 ^
submit: function() {- M, e5 A" C5 V
if (this.inputValue != "") {& Z0 x% t: N b7 O
this.List.push(this.inputValue);; b$ L7 E7 x6 m { O: Y! p% q5 b* v' ^
}
; k. ?- ?" N/ O; T. b# J9 f) l this.inputValue = "";& w/ B' @+ v- S6 i. ^8 Q
},. {4 R5 E* f6 n" B+ b$ S9 S" ?
handleDelete: function(index) {
" S: S1 `) [# X1 `0 H6 p this.List.splice(index, 1);
! L( R" ^6 Z; x( c/ B }
6 J0 Y, j Q- C: Y }
0 r+ o; \1 s1 X f};5 w. J. S1 G- q! P# O. J
</script>
# h; ^ ?! a# A( x1 {- i5 {3 y8 _3 [, i8 J" P
& |; d& c h4 M6 H- Z4 z5 i* D3 B: b1 t; I
/ V6 ?3 Q7 v8 }4 N1 P+ f5 q
; e! C) i& D1 e6 [. j
3 J* ?0 c% B8 d. [4 P. F6 v. f0 G7 {7 Q3 Y
<template>1 K# C! I! U" H ?- S, `
<li @click="deleteItem">{{content}}</li>
3 z2 }% q* c/ Q; {2 t# y</template>
' {, _& m1 G8 A% F5 \
P- j0 a7 Y4 d: h9 V<script>! y4 _& s4 O. N' L9 c6 M
export default {
$ R/ o9 O8 {" U props: ["content", "index"],# t% ?% n5 ?( U/ b) F+ n m
data: function() {
% f6 \$ v: ?$ r n9 U8 r return {};6 f+ N% s9 a+ W9 {, }
},. C$ x4 n3 n4 C: p" ?, Z T% e7 C' I" y
methods: {& H0 \0 l2 i0 |; ]) o. s! F
deleteItem: function() {, w/ D8 F9 d2 O. c M' u
this.$emit("delete", this.index);
. A9 t* r, g0 l+ o3 x; u& o6 W }
- h O9 y9 o2 S a8 \+ O }
g- \1 N, b# P0 I2 c4 T4 m};
$ A; U2 I) g1 }0 ]0 i</script>5 G8 u- O0 x: d# C6 K+ w- j
Q/ }4 I( ?) f9 j
k- H+ x* K% u. S8 a! U: T; Q6 [
) d) ?/ J4 m8 J
/ r5 c6 [4 r" ?- I) }0 ~! N4 k5 A2 s" r |
|