|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# I$ S7 p1 C! b2 d/ K( t h5 d4 ~
" P9 g/ o& `1 z4 t8 @6 g2 N, O$ ^2 K0 K/ ]
<template>; u1 A+ d7 T: g$ z. A4 Q8 h
<div id="App">; V* ?7 E) `, P9 x
<input v-model="inputValue" />
( X ~2 Z( |% h1 v0 @ <button @click="submit">Submit</button>- ~4 i4 e2 r* L/ o( {
<ul>
" S' E% M( \0 \: G# h4 y& j, ~* x+ Z <todoItem
$ U- T6 J) [5 i! r v-for="(item,index) in List"
; }/ ?* V. V' Z: l- K6 [ :key="index"; c& A- `# }+ l$ n. [
:content="item"5 h: [; p- E& P/ |
:index="index". ?" e% x+ A- x9 }+ z
@delete="handleDelete"
, K# _3 b: @: Q, } ></todoItem>
- R1 |" i! L* {) ~ </ul>8 v* }/ ^+ d, V7 Q' m: e6 X
</div># t- F/ o$ m, h* F5 t$ W+ E; ^
</template>
, _. R' s/ `# y4 g$ x) N+ s, {
" D: z8 f+ |: _0 Z5 I# W, R<script>
! @ ` D* ^. N9 D0 {" M$ }import todoItem from "@/components/item.vue"; O. j; ?% o$ n" h" W; J3 \/ M# h
9 a5 F5 G: U: P6 ~9 Y! Xexport default {2 _4 A: D! o2 Y& Q3 s' m
data: function() {4 z6 b* ?7 r2 r4 w
return {! w, i, a$ l! r( O
List: [],' P7 Q, j* p2 K; j- k( e& m {' `
inputValue: ""& B* I0 L7 W/ S% V
};
+ P( o3 _8 O* P },7 E J6 r2 P( H
components: {
7 k# f4 p9 }9 v. y0 F R todoItem$ a, f8 t: t( P* W: N. f
},
8 ^0 n0 O7 c" e methods: {2 e. p. z3 O% A9 s+ e. F* s
submit: function() {
7 V' Y. ]* B; O8 J9 { z if (this.inputValue != "") {2 w. t4 j0 {0 Q; }$ k9 G
this.List.push(this.inputValue);, A; j5 W% \ l3 M, @& b4 I4 r& A1 p2 H
}
, A+ a+ [* a2 U3 D9 K& y$ @ this.inputValue = "";$ _7 n. S9 ~+ c7 t
},/ P# a% E1 Z( R3 g7 b* R
handleDelete: function(index) {
' J, i- S3 {; v' C7 H( M" [ this.List.splice(index, 1);9 e) U+ e- X" D& e8 V `
} S' m- V3 o/ j* n" `2 [6 _
}
9 r' K1 I8 ^/ D/ o) T};
* K2 c3 n% z& T3 k</script>
. [& Y6 i) e% v$ r2 ?
" V& @9 b0 J; L& w5 @; \$ B
9 S8 G2 ]3 L5 r0 N8 i+ s; H* k& e' R5 N7 A; D9 A) ~
. w s. E7 p$ n0 S9 A1 O: d3 h l {
! _* h% A9 M# P2 X
+ a$ W+ ~, p" P, u# G<template>4 f( b9 g- \, w
<li @click="deleteItem">{{content}}</li>: a$ L) W, }& H
</template>
L0 x# u4 o F3 N
! q2 R, x1 ]5 Y6 }0 C) p! \* ]<script>4 _; u2 o+ h; H! U$ o6 m+ }
export default {$ N) h4 |# h* x2 c
props: ["content", "index"],* @( K% D' e# l) C% H# R
data: function() {
+ [# o+ e: V% x; [! ] p. f! W return {};
/ |! { q1 T# ^, z: n/ Q5 s t },- Q+ u4 K! l3 ~2 f- `8 q
methods: {
) C1 s0 f7 Y* [! I" x- [2 h: L1 @( } deleteItem: function() {! _7 O7 a& |! _/ @4 q( Z% d
this.$emit("delete", this.index);
8 @2 L5 v; \0 \; ~# D; C0 c }
* W- i7 B0 Z) t2 a' Z& M* u% ^' z }! \- g* D$ v, r3 p5 x S$ e
};
5 w+ M' C; @7 s* W: A</script>9 E9 P3 S( b. b9 ^) |' D
* F' J5 U G5 m1 B0 I2 L3 x
# Y! s; w; k6 S+ @! j: n" X+ _
; d- @' L2 C, |& a0 Q, g' M
|
|