|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 q' A( i: ^- O7 P( g5 P Q8 b# ]( D/ x: V' v6 y
: Y: }' p S4 K9 S+ m2 m) ~5 N! S+ a% e* ]+ b3 D
<template>* w! h5 M2 K+ e) G+ T2 ~% k1 o; w
<div id="App">
1 \; C+ A+ G' K7 ~# \, S! M( g <input v-model="inputValue" />/ }8 M2 k7 U# a9 ^
<button @click="submit">Submit</button>3 @* Q9 u* f% o- Z& B( U
<ul>3 l! {0 F1 ~# H8 R
<todoItem- L7 |/ a1 G: ?9 Q2 B+ X) ?) i
v-for="(item,index) in List"6 n/ g4 v" j" X2 Z3 X- e
:key="index"2 _1 a/ |! H& v% I" [$ `( f, Q4 e
:content="item"
5 C8 ^1 A5 x- a' A+ G1 ~ L2 B :index="index"
8 e! s+ C+ `, c9 i% g1 G* a- h* N @delete="handleDelete"
( o* v3 C9 k+ `4 B. W ></todoItem>
! _$ v- p$ t0 H </ul>& g! M1 u5 V3 [: c1 b2 U4 y) `
</div>
3 m9 F6 Z5 z3 i6 ^% O9 S R</template>4 O% P/ j# l) ^) Q- t7 `
8 ^! j8 q% ~- H8 n2 }
<script>" m- F$ H4 E7 e; ]2 L, V( X
import todoItem from "@/components/item.vue";
. M5 B7 v+ A8 H4 ^
4 Q) O( o5 F5 Rexport default {0 z5 q$ p: ]0 U7 P" t. c+ T
data: function() {
+ n/ R2 m( N2 {- T8 d$ y4 W1 Y' Y return {
$ P$ x. S1 }8 h List: [],
* G* J7 {+ S5 u inputValue: ""
5 _# }2 @) ]+ \0 } };
. B l; W( O1 z0 m2 m& a. t, Q },
& r: v& m7 y$ i8 l% m4 a components: {
" r v |! E/ M/ ?: m0 G todoItem
r( b' o5 E" y },
& F7 C% q2 q( P/ ? methods: {/ R, i! x2 n+ j
submit: function() {. {3 c" {1 b9 M' [& n3 C2 t! b1 l
if (this.inputValue != "") {3 r& q: O6 l0 k5 X
this.List.push(this.inputValue);- n$ M8 w" B9 }0 e
}1 m/ Q1 U# C/ W2 W. w
this.inputValue = "";
6 O. m# W, s' {+ v' d; J5 w },
4 F! w$ C. ^$ ?. W6 D, h handleDelete: function(index) { s0 I2 }( i5 V8 f/ K- U/ t. ]
this.List.splice(index, 1);
8 C2 s" E& e+ d' b- R7 L }
; H8 w5 Q. e9 l/ z3 y/ t5 C3 q1 Z }
" Y2 ~+ x% D- e};, q: R. A$ u6 E5 r
</script>/ W7 c _( ~- W& F
% A, x5 v; N2 u( K P' D% J. @' U8 s4 s2 i' T5 h& [
9 r# |' _+ `. j* ^5 \
6 t5 A" C/ ~+ G b+ X+ S- R
3 C8 t2 I# T, H4 s. ]# w+ a) @0 T
4 z0 s! m# f% @' w( A
" c' o+ p+ m' W, d% V8 z<template>( s: t2 p9 f: |+ K" F
<li @click="deleteItem">{{content}}</li>/ `+ N: G; m' d/ H
</template>
! K4 L% T# s% _3 z3 r& K( L* a1 \% Z' E9 V- K, |
<script>
6 c" S$ A6 U5 Q; ?export default {
% _' C% f( e* n+ N! x# ~ props: ["content", "index"],/ ~) b: u5 } M, ~8 M4 ~" K
data: function() {: C1 a7 z4 H) w9 e
return {};4 A# P! q4 G G
},
% H. n P; q0 ?2 f1 F) e [ methods: {
* B% }, l, Z' f) k! w1 q deleteItem: function() {
9 A5 {) ]' A! Z$ S, { this.$emit("delete", this.index);
$ s& y2 Y; Q/ {2 r0 ^* J- X }, u. G' { `/ e- W
}+ I. @% W' \6 ^( B: N
};
- @& m, b" r' c0 h* C% t* S</script>" ?8 D, G, p* `: Q
: u! X/ S' Y9 p3 Q9 X" A
6 G0 i) v- \1 Y- l8 t1 k
# [8 ~* i# A0 [ O
! L- e ?7 z' ^% @$ [+ G% l |
|