|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
! H" _" q# E& h+ ]/ ~) z9 j1 j2 W! G, r! o9 v, o: x1 q# P3 q
6 W& Y" I6 n$ O( t ]. C
. y A) U) i& [* D( ~
<template>9 N. D' h Q1 }+ t4 G- A) i1 p& q
<div id="App">
3 I2 N+ f. @" L( v; Z8 R/ K1 ` <input v-model="inputValue" />
, }# A' h( | q5 o <button @click="submit">Submit</button>* I9 h& ]( c; y9 P: o
<ul>) U F$ K5 B5 @/ y1 S, i8 b
<todoItem
1 }# ~! F' m( x4 H7 T3 ] v-for="(item,index) in List". q5 c5 t1 L& w9 A+ Z0 P
:key="index"
E5 q8 w8 p4 c7 V% s& g. H :content="item"1 u5 j, \; l+ Y9 i9 n Z/ d3 o% U
:index="index"" Z" {; W+ x# P; P
@delete="handleDelete"
7 V1 l" v0 K# D9 v ></todoItem>0 d' m+ @2 V$ H/ }/ B4 S/ W* C$ v9 i
</ul>, i9 q% S6 N& R' k3 b$ S. M4 F. c9 S5 o
</div>
. _# I: A0 N3 Z j$ {0 ^( m& o</template>
% C2 e* W( \% ^; U
( h9 c; Y3 L9 u8 A7 ^- l<script># s$ ]: Q; P# b2 s0 Z
import todoItem from "@/components/item.vue";
+ j( p, [( j. R. p/ ~: G
0 M r$ P6 g! P# O" U' v, |export default {$ E9 G f( @1 B, F0 m) E8 g \
data: function() {
6 i' w a) F# b return {
' x8 @' [- F, Z3 @ List: [],
: H O- O# O- Y- P inputValue: """ |4 I* z1 N8 q' A _' |' s
};
' [+ O7 w8 c1 D& U6 u },! d9 c- w% z2 M# b. U9 {# d" q2 @- V# u
components: {# I- P: Z% h, U( H
todoItem
2 k# d' x# K+ \& s6 y6 E },5 |6 Z# f) N+ g( r. E
methods: {: e( |, J, T; p. D" d& P; v2 Q6 m
submit: function() {
3 j* G1 c, V4 j4 ~! b# r( S1 n if (this.inputValue != "") {% b% Y2 W* {, S Z
this.List.push(this.inputValue);" n9 R2 m3 L" z$ Z9 o; G3 u
}
0 g" {) K+ L* \ l- x this.inputValue = "";
6 H" j# R( Y7 f1 ]7 C },
& _ f4 P5 o0 b: L! l- t handleDelete: function(index) {5 O3 D3 X# u/ C. D- z
this.List.splice(index, 1);
# F1 |/ q3 Z. ^# k }0 \ x/ v8 Y! V, k
}
; X I2 T8 ^& f- @};% }# T5 I2 h8 z
</script>2 g y( J, m& Z t4 e
+ f, G6 W3 l: t4 F+ q% ^
3 E4 f9 n9 [! A2 R
/ F. p9 N9 t! u1 T
3 ~8 F$ I( ~7 R6 x- X, m0 ^
5 g; {/ r5 M4 d4 |, S) [! F
) I! I1 i. s, e
$ g$ o1 `- x1 c1 _& O/ Y+ [3 W; j<template>
O& Z$ e' w( F' a% x' I <li @click="deleteItem">{{content}}</li>' C) b: C1 E9 Q X* l
</template>8 }$ l0 q. t# ~) \
* A( o0 u7 f z' P' ~. I/ V6 z
<script>
6 M) p1 q; y: d, a9 K5 Lexport default {, ^; u6 @- {6 K w8 i9 R
props: ["content", "index"],1 v5 L- R6 m1 s: b% ]3 V n
data: function() {
3 q8 \1 o) F1 b- k2 z3 W z/ R return {};
/ @0 Y: T- t* }4 a }," i8 `! j( ]" A I
methods: {
4 V N6 V q4 t: ]; m deleteItem: function() {$ `. N( I9 K8 Y8 K8 |
this.$emit("delete", this.index);
7 [7 t( ~! d6 F% g }
% w; \ ?. | [& g$ B( T1 l }
8 z8 _5 A; Z5 ?};
+ }6 p; h$ x( i$ h</script>
* i+ P5 F" F4 a6 }. u. g% E |1 [3 E' g" J# O" b
6 |; o. B8 `" ~$ m: ^ x* l5 Z% l0 c8 r. Q5 Y# E6 d/ z: @, f
% P' u* L7 g$ G) P4 a' K
|
|