|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
0 S2 e3 G7 ?2 P Q1 d5 a- C* }% h
2 S- z( ^( M, Y/ R: w$ R4 _' ~
+ X/ D* w7 O3 U: f5 ^
1 X4 X- H& j. s$ u# {<template>- u6 p7 q9 m* q9 Y, \. v
<div id="App">, J' V% j: w+ i
<input v-model="inputValue" />- O0 E: C# x1 X
<button @click="submit">Submit</button>
% l" O6 j" y) a2 B <ul>
) T2 ]. E+ \# F3 ^4 S+ E <todoItem7 J: W) ]) T7 ~ ]$ h! ~
v-for="(item,index) in List"
( b: `; H8 Z/ A: m! L :key="index"
8 \- {2 S) Y+ a* r9 r6 q; z :content="item") U% p' [8 I8 s1 C6 z6 U; \
:index="index"5 g2 o. n1 p2 ]5 `6 R+ l
@delete="handleDelete"
1 {# ~: d" b# N" J! c/ D; n; X ></todoItem>1 `9 B4 d2 u' i% H
</ul>. k3 Q4 Y: {2 U" M
</div>
, B0 P" t8 q% w+ W2 B0 d</template>
& }! R; N- ~8 R; u7 n, I& _' \, M) F' l
<script>
/ O) a6 n5 x3 Y6 ]import todoItem from "@/components/item.vue";
" j: s8 u& N/ T9 d! Q) O! s: g+ E
+ j4 ]2 N. A8 H0 a% v: f4 x. Hexport default {
, A! w, V6 L" A; | data: function() {
# l8 \1 C* A! e% h return {1 V9 L* _2 `! @
List: [],
7 |7 f0 L+ d ]! t& b* I. q inputValue: "") `0 f+ o' \6 y {/ b% p
};
8 Y' \3 Q5 \7 W% S },' T. ?3 r2 b8 ^+ R8 U+ E
components: {
8 F1 D! Y( r6 V6 d9 I$ h$ {5 c todoItem
/ e% d) q2 l4 S/ \ },
3 E3 x9 H+ r% |% F( y methods: {0 k+ }1 P V S0 Y& `
submit: function() {8 |* ~% S% c( u* l5 k: {; }
if (this.inputValue != "") {
Y/ z" N/ j5 `- {* S this.List.push(this.inputValue);
9 W1 ?9 ?$ n% S9 U% a }. a- _% t i" T3 B& c
this.inputValue = "";* r/ D6 x' N5 j# V
},5 P- g, g' V9 C
handleDelete: function(index) {
; w- J) F" E9 @) l this.List.splice(index, 1);
9 L3 P4 ~2 e! \+ B3 C2 { }
6 J7 `' ] V2 W }
" Y5 O7 s; [+ M/ H};$ N2 N8 d4 H$ x1 }; x& }0 F$ e
</script>( c! w! |3 Y2 j$ J' f; |& s
! w% p. F8 D0 d8 u
4 @8 W3 V' e N3 r0 _: E5 _, L2 J# }# w' E3 C) c: e6 j5 [
% O4 G" N* _' e4 e$ \) [
, N$ g( k7 s) |) [$ e
! U( C0 ?( \7 U& k0 E
! U. O( J3 |# }- o4 L M<template>5 E( M8 }1 N9 E) u: M2 p, |0 i
<li @click="deleteItem">{{content}}</li>7 U P9 S3 R4 g8 S5 ~
</template>
) F$ w0 a( ~# v5 W' }0 M7 Q5 s: D; L. N& u7 N
<script>$ {9 j |. \: C5 y3 _
export default {$ m3 k: |, B! p" t0 j" h
props: ["content", "index"],+ A7 K; p- k- {" o$ G/ `0 c) o3 V
data: function() {
8 t4 _! ~( R' r z return {};
+ K" `) s* M% z. C+ o# H1 F, I },
: M7 T/ `' K; i) P methods: {( |4 u" N3 u3 }+ C$ h& q. @" q. z
deleteItem: function() {
7 y1 A. _0 u8 G8 g this.$emit("delete", this.index);1 L3 w S* V% q
}$ y v4 g. q3 l3 [! v8 w8 u
}
2 P" ~7 }+ y- x};
5 k1 I3 l* E- L, C5 Q5 m) }</script>
) m3 g6 b" h# F6 T+ D: t( z
! M6 |: e" m5 f9 J3 w5 X7 O
7 K- Q' j5 W" y O, h0 W1 Y7 Q* U+ F# |2 u6 u
+ F6 F# d4 }+ b
|
|