|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
1 C: b' p% d; ^! B+ g9 H1 P4 Y
# H* T7 I, V5 ?8 i% L" q8 r
`4 c* V3 H, W* ?2 j0 k
0 c) e0 V6 r. Y) g& i w<template>
9 a2 G' d* V& d <div id="App">
4 l0 B) d/ x2 K. K2 e# L <input v-model="inputValue" />8 X+ V9 k6 O, v4 n( I6 L7 ]9 E; ~
<button @click="submit">Submit</button>. w) n% g( b4 n
<ul>' O/ n+ h/ N2 P- l% a4 ]4 o+ _
<todoItem& x1 L. K* M# T1 j, O
v-for="(item,index) in List"6 c' L" {$ c& K2 U) o$ f. F% s, ? [
:key="index"; B1 b9 l; n9 e" ?" Y7 L. X
:content="item"! p/ L, i4 d' N: O3 a- p3 i) q
:index="index"
; i S1 ^4 x Y7 D @delete="handleDelete"
5 g& U2 n$ |+ w N8 M ></todoItem>
! B& I6 B* X$ Q2 v% B </ul>! F/ v' D$ y6 b- S2 v
</div>$ W9 C: r+ Q. H; _; H
</template>6 L5 _& N& O i% |1 w) x3 R
- r0 @* o" F7 X- l
<script>4 k& [; z" G" T2 c6 t
import todoItem from "@/components/item.vue";& e/ c, j# Q, B" p. {
% B6 E- o7 i9 y6 hexport default {8 q1 }! C8 _% G- I' z0 P4 c
data: function() {) m& }* z/ j; q
return {5 B$ V3 p+ G: e
List: [],
# T* i+ I3 H0 e& l8 ] inputValue: "". P( e) @7 Y E6 A
};2 e$ z: U ]1 S8 y7 m8 ]
},
$ [% n; v" g' V# D5 e components: {% j/ ` K+ d& l' s3 |1 l" [6 s
todoItem
/ u2 u+ [7 a8 W4 z3 s8 @8 _) R },
5 X' P* I* M( r5 }2 [ methods: {
8 |, y0 U. `$ X i submit: function() {
5 ^$ Z5 N" w& x% ~ if (this.inputValue != "") {
8 I6 Y* l L5 y& [4 g this.List.push(this.inputValue);9 ~" D6 U" V: o
}- g" u1 ?" a$ C/ _( m
this.inputValue = "";
' M @& q( |1 m1 ?& F2 F) b8 z },4 L3 Z1 Q! V2 O' w* C; m. X
handleDelete: function(index) {
w7 g( P1 z1 S& N$ | this.List.splice(index, 1);
6 z$ y5 i8 A; V* [% V( |* c7 }3 b2 h }" S* P: m) S/ h `
}
! i: [0 o/ g0 F6 E- V* T};
" a( Z& Y0 w6 b2 r</script>
. o% |& z$ U7 ]% |- ~& n9 J- U+ M$ O; d/ e6 g: G
4 r* C/ R- k* ?! Y- H$ \1 p S4 }- D. O5 \' g0 A5 d
3 ]' F* w2 u# o" b7 H3 h5 B1 `) z& E( F
5 x+ v* D9 D5 `; w. m6 g
5 t1 ^* |; B* v
8 _8 N3 O9 |, x! i6 N
<template>
Z. Y) d. H6 R <li @click="deleteItem">{{content}}</li>6 y4 m3 f. r% P, i
</template>9 E2 Q4 j6 A# _. h5 F
) b1 ?( @* L. b<script>
$ T4 X0 c: |$ L+ pexport default {8 E$ j( F9 P* w1 ]
props: ["content", "index"],
( M! @3 C9 k! G) s& | data: function() {
9 k2 R6 }* { l4 R; O# u7 O return {};# e2 k2 m* z" N6 Z
},
* N4 y/ M8 B7 c4 f- X methods: {! b; w! T8 m! A
deleteItem: function() {. c8 f: Z/ {) U4 \! v$ `
this.$emit("delete", this.index);
. ~' ]0 H( O! h* A3 @* v l4 v }* c) r$ ^! Z: p# O# @
}
# o( R' a6 v& A# B};: c) _. E1 P7 U, v/ b
</script>
9 F' }( i8 U0 h7 k9 n* u* C0 G5 k k' _! W! h6 G& t" v4 \5 u
/ X# ?" C: a: g; i& X' T# W5 N: D! o' E% K% L' s
1 K! {; y3 L4 X7 g( n* F+ {
|
|