|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- X& ?3 }7 i2 {( _3 A8 p. A
. L* E; F o" c7 ^ S1 A, g& s
0 S$ s. F# @. @0 f2 f# e3 n' m
w- i1 [8 i* p1 E& p<template>4 V9 D: A3 B' H$ R, Q% O ]
<div id="App">
* a5 Y4 Q" C Z+ c. L <input v-model="inputValue" />/ c$ r$ [2 v4 j, t3 _( x
<button @click="submit">Submit</button>
% W1 K# H7 x. i& J7 N <ul>" `5 Q! |% M9 z# g6 [: t- r6 u1 F+ T l
<todoItem
7 M5 H5 \1 R. Q: }9 C v-for="(item,index) in List"& z! I/ f- y5 |3 c8 @
:key="index"! F1 U3 B# I! k0 ]4 s) w$ [
:content="item"3 p' R( W8 H. N; `2 k3 ^
:index="index"
9 ~' T# m, e. _0 m8 f; X4 r @delete="handleDelete"1 Z9 k/ p$ M4 a, Y: L! a
></todoItem>
& ]- H% E2 T9 z7 r7 M) k) z </ul>3 a" S0 o' {) m+ t# N
</div>, p$ G1 Y! e1 R( _6 [/ O9 k
</template>
: c+ ^9 B2 |2 p n
' V: i! G9 `5 w<script>
( Z/ s9 J! j7 x) [# \* rimport todoItem from "@/components/item.vue";
6 [/ ~( y+ ~0 |4 W0 f& X# J
* G8 \1 h+ y4 Dexport default {8 s4 R% P5 v+ l+ d: S
data: function() {
+ `) D' J1 f: v" o- p return {( \7 w; m( d5 r
List: [],
& m0 J" i2 Y3 \7 ] inputValue: "") N$ ]) i/ R7 |5 D8 f% q' T
};
3 H) s, X8 s4 N4 X4 a+ a3 w7 M$ x* E },
i+ g+ V3 B3 @" m4 O3 \ components: {
' F; b4 g$ K, O# K& b+ v) E todoItem& `: y4 B" h+ L: i
},( [ j& ~& |, i8 w/ r, P' O, `
methods: {
$ S5 V- u4 F0 m1 p9 q submit: function() {- |4 J- o" G8 X( Y0 c; ?2 Y, s
if (this.inputValue != "") {' E1 Q- K: k0 Q1 R, v8 G
this.List.push(this.inputValue);, e* F* R, E0 n4 p* o
}
, X7 ^: ~, N. B. K4 k! Q* I this.inputValue = "";$ o2 }! y2 P" \4 D5 S6 d4 t7 {
},) P+ u0 r. F4 T; U' k: h& J* }' ]
handleDelete: function(index) {
* K! l! ` i- I3 u2 u this.List.splice(index, 1);1 ?& n- {6 q% L2 \
}
, T w6 [- ]9 R$ [7 N }
7 p1 ?( a# d; p( n};; [1 Y) F# H% H& h
</script>
6 x8 E# i% Y/ ]* M/ o: H1 G) \& S9 @ ?+ A/ F
; U ]4 E& c& j- L4 l5 R( y
5 i' V: x5 l( v" a1 j {/ g/ L4 R6 X7 t$ U& W1 x
$ G( g2 Z2 s. ?! A: D ~
+ E9 N3 [; J% P* o7 ?: j
8 q3 t9 i. E- B8 W1 V$ B& \<template>. x5 j- r6 S. Q
<li @click="deleteItem">{{content}}</li>5 Q( E% z' X$ r2 V
</template>
, w. j/ U) a& b$ ~& p) x- B- _4 y4 [
<script>
& L. l- y% Q7 D& Bexport default {( ?- K, J7 |0 T4 C& r. |" P$ z, [
props: ["content", "index"],% q5 U& ?! M/ T9 D" {6 z& k) M
data: function() {
# x7 D q3 ]- a2 a0 ^: p return {};
" s( [# J9 e% ^ },
4 Y; U0 e/ ^0 [ methods: {! c7 s e5 k$ }: ~( ^. a& p; Q
deleteItem: function() {1 R& p. u- B$ C
this.$emit("delete", this.index);* P. w/ e! k; @$ l
}
3 ?- h J0 o6 ~4 u* e- q% c+ U; B }9 y8 \: O' F r4 Z0 n3 W) }
};6 v, e6 z% a' \1 I" A! m
</script>
5 q4 a7 x& y" u1 |( A# Z# e8 @3 T, ]+ h/ N O6 X; T$ v
( \" S! ?! b9 n. f9 U6 h9 |: L5 S" h0 u# Z, m5 u( L0 ?8 y+ x) K7 |
. ? A8 ~9 G- T- v. c# c4 ? |
|