|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
; q. s5 A- b4 x5 m2 c
0 V- a/ B7 t+ Z2 _2 m
. }& c2 ]1 u1 H$ {& [$ y. b: N+ `# G) }, [5 f/ b0 ? S
<template>. R# F1 J" c; }
<div id="App">
/ x; _! P5 O4 _# _* P <input v-model="inputValue" />, J. Z) r3 W# c) w
<button @click="submit">Submit</button>& C; n( t+ t( g& U
<ul>( R. u9 n4 X& ^' z
<todoItem
, [3 D- m# I, s! ? {0 ^1 C: m v-for="(item,index) in List"* Q( h$ ^5 l. y$ w# ~* d
:key="index"
" ]+ ~7 S# s' C' {0 a, T1 D :content="item"
7 `0 Q* G' b4 o$ ^) v :index="index"( [: K' T# w. l0 K; Q1 K" J+ @' h2 E$ X
@delete="handleDelete"% p( N8 S: l4 ?# ^1 f) {, {1 f7 A8 c
></todoItem>
3 m* _3 ~2 [/ @% Y5 C2 f* l </ul>
, X: R. y5 m8 z4 i8 @. ~# P. U </div>8 Y5 a/ X9 T; b- U6 w9 ~
</template>
; }! L/ g6 N& [6 m" V7 A8 n! j, N7 o* O0 w4 y- [
<script>9 Y, L6 |; G! m2 x; c h
import todoItem from "@/components/item.vue";
! K7 @5 X% O% i$ r8 ~4 d
% k% `6 g, h D7 C# s0 A" ~export default {
1 g1 @% v- X, l( ` data: function() {1 m3 k4 \6 X/ @: K2 u% i; u* P$ k
return {
: _% k! v8 C5 \4 }# c List: [],
$ N, U8 i: F+ l; D* M. O6 K2 W inputValue: ""3 N8 q$ Z6 q: a- N4 ]8 r, \
};
* u2 H- P% `! R, ` },! x# N( {' d+ ~4 c+ o
components: {
" R" l) b' `9 i/ `; O: f6 w5 Q todoItem
% `/ W4 S% a% I/ |* c; f },
! [. q9 D( W* ~ Z9 G4 L( S6 Q methods: {
7 o$ i: E a( |; i submit: function() {
/ Y" W' u9 ?/ g d) P if (this.inputValue != "") {
1 g4 w6 N( A/ e# \, d& `- T this.List.push(this.inputValue);
7 _) N+ j* ^6 T* L" D- U: h }$ O7 |$ x- B: B/ j
this.inputValue = "";
* U( ]8 {2 p" r- C1 y% e },, ^( P+ u9 S+ d. S- h% u# T8 Y
handleDelete: function(index) {
( I5 T7 p' y: u3 T this.List.splice(index, 1);
% G4 S, `" h0 w/ ] }
E0 g8 A( \& d. n, t }
; J+ m$ C7 T8 ]- {$ e9 B};& [# v4 M- b) S% s, l0 j
</script>
- A$ u$ o: i0 x( E# S# j4 |6 G2 n: I. W$ x) f" V6 b
1 P {$ K# o$ ~2 P3 W2 D& x1 A# X' V6 a
; D& D' L3 t& z' G' F" {8 V( l( s
$ j+ D% b, m* M, {
% i$ H7 D8 [0 l! E- R
/ P8 W" S( p3 x9 N8 K) Q<template>6 h+ m# {- S4 `' m% w. l: `4 b. Q
<li @click="deleteItem">{{content}}</li>
8 M) Z% g1 N0 u# P* p6 G) o+ t</template>
, O9 D' Y4 }+ M& H" p$ R' |+ w* H- c# J0 M
<script>8 B) ?4 x. J' l$ B& G5 n, K
export default {* b. A8 @+ c+ D/ x; [' y* P
props: ["content", "index"],3 f0 e" A* ]9 ?. S5 E; j5 c
data: function() {
" [! S5 g, [: b4 O* z' o5 F. N return {};
* w& `2 N- w, z8 K& h/ y7 h# v },
3 [8 a# l% Z. R! Q methods: {
+ O3 H; j; ~+ x, m* { deleteItem: function() {# X+ K% K2 M5 I& K
this.$emit("delete", this.index);
6 [. B$ c: l* w6 U }
8 o6 D( z% j9 K0 C# b6 e! T) ^- a }
[* C# w2 v( G: e. Z: Z9 Z, ]& d};
( A2 {6 r9 p5 X/ M; N</script>
+ E+ g, @% Z) m6 J7 {
( d, t# h0 m# ^* i# i8 h6 g7 l2 _9 }6 v0 E# Q/ F7 M, l
& r# T% H3 z; E6 f9 J+ d
$ [& i5 o6 ~- Y) x |
|