|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: I; _$ Y e" r/ `! o& x" g+ [
+ F4 _" s$ `4 o( X9 q5 C" z: |3 L& {
~. N1 ~" V" l( m4 A* Q4 y) S+ @& M. I* \# q f, `( J7 V1 |
<template>& Q3 r; F1 Y4 R
<div id="App">- S& F4 k: n4 |" r1 [1 o
<input v-model="inputValue" />1 ~+ M6 \$ M( W2 }# P. i
<button @click="submit">Submit</button>, F) [: E% s$ e: e: N
<ul>
1 L+ H" h8 d e/ E3 v) U% _ <todoItem' I8 s9 Z; j$ E- Y
v-for="(item,index) in List"
( J9 \ j. {' B$ g' p7 j :key="index"' ]" C% E/ S8 @5 v
:content="item"9 b$ Q4 S1 p1 U8 q6 G
:index="index". Z, a: g* }* E$ l1 \3 \, x) \
@delete="handleDelete"
/ m7 o5 _! z7 C# S6 @1 K6 H: x6 ] ></todoItem>
3 i5 S# s8 w& ?5 [/ X </ul>
' @( F$ x8 r7 I2 ^, p- O </div>; {3 ^7 C& H: `' u3 [8 J
</template>9 D" S; l% R2 |0 ~
, f6 d/ ~( [6 H q: m" x<script>
9 \! J9 p4 z# bimport todoItem from "@/components/item.vue";% C4 E* L; o/ l" ]1 B5 r+ F6 L5 m& i
4 E8 H* m7 v- Y; Iexport default {4 t' b4 C* V7 Y% J7 s
data: function() {
6 o7 `' H, s7 f return {
+ ~- k: o b, [0 E List: [],
, u5 r& y/ e, F" r( q! h& L9 \ inputValue: ""
+ R+ {$ j- O% E; H5 y };
* |4 S; a8 r/ S },' d: M0 V/ ^( I& w
components: {
2 \- M8 s6 Q+ c# w5 o( N% o todoItem
" ]9 z2 u- A, [ x2 u- k6 ^1 G7 F# U },) [- R, z) y" {
methods: {
6 E- U! X! a+ D, p9 m1 y submit: function() {8 i& D* C: N' M0 Y: F0 W
if (this.inputValue != "") {, s6 O1 U/ k( q7 y0 l& U3 [! Q8 V8 R
this.List.push(this.inputValue);
% b9 j/ {1 F, D7 P/ P. @" h H }
! N5 `" N' _1 ^6 ?% t% g2 C* ` this.inputValue = "";
w$ c. f/ i- c1 c, ] },! n4 O% a }8 Q7 C. A' x& ^
handleDelete: function(index) {
# g& F. |& ?& T {( e. d this.List.splice(index, 1);9 K1 n) u/ N+ n# r. _6 d8 I0 a
}
! j+ t& M3 p% A- S: R n' r }8 x5 o% V0 ~5 V" H& t3 V# L
};
8 M: d( e; _% {# `( X' n* X" O</script>
: |0 e) F* D$ O, O- d+ b! }# S
$ F# w, K+ j) o9 u! r# D% O* K0 o0 Q$ R e; z
+ C* f0 R: N( H( M$ d
) w" g- q* [; {! d: t4 {
1 i" s. |4 L& U4 O0 W2 \. w7 A' t u6 ?" Y( ~, r7 P/ k- o; S
* n1 w9 C' \/ U5 {% r& |<template>3 |- L8 c) V/ N8 i6 H
<li @click="deleteItem">{{content}}</li>
3 ], O+ |# E, Y</template>
9 R- w* u' `& B8 C
6 Y* g' ^9 |: @3 _$ b' u<script>
X& v" z% [- ^ @export default {
4 S1 o' _4 c3 Y" X props: ["content", "index"],# I# s2 k* N$ I) F8 l3 b& |1 p4 D
data: function() {' k/ Q3 j4 E9 i
return {};( q/ p' U# k: @) \6 A3 d: S3 p9 M# m( b
},5 W# K" r7 V" g3 K$ ?+ ?. @! c
methods: {
6 Q9 [* S' M# o$ g. c+ n3 u9 L deleteItem: function() {
! {+ Q9 l6 f4 Y3 J this.$emit("delete", this.index);
7 {& |7 \5 D/ S5 a- }+ ~ }
% p/ K2 B4 `' j1 U* ^, a0 l }
- e' V+ N) G, ]4 l2 F};
2 R. j8 b0 h# D/ V; N; B- H( G</script>
0 b. d8 k2 [9 Y# F) N6 }$ V" K- l( k) ~2 ], J. \7 j% [1 |' `
* p, m% k z( Y6 d# }0 u% P: E2 S9 y% ~5 ?! Z
6 T! w7 v( Q+ }* a7 v( ~6 g
|
|