|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 Q# Y% I( y; l- {- m
5 A6 E3 u- d/ f- _* o. a X# P
* q+ q$ _+ r' U |
<template>
& p, Q) q1 q. @' s+ v5 L <div id="App">
! e; `" z( R* T <input v-model="inputValue" />
- }4 T* A/ i% e) ~, E _ <button @click="submit">Submit</button>
# i8 f1 ^0 `$ }8 b( c4 V4 R <ul>
1 }, f, t2 p- N; i0 } <todoItem& _- B7 i3 |% R1 ?% q* e
v-for="(item,index) in List"
3 S: i9 W9 |; c B6 i :key="index"
0 }, p& o5 g' N6 v. l :content="item"
3 V; R, |% X5 L :index="index"; I: C$ P7 ^2 F% n: O
@delete="handleDelete" U$ k3 G" v9 u6 m: y6 ~7 f" A
></todoItem>1 p" d! n/ C3 G% K7 }
</ul>
; g9 j1 g/ M! F( x, W1 | </div>
. l/ v2 d9 V. F* V6 I* @5 r; x</template>' B( W G# I* ~
; I/ B, E- _9 ]* L, _, D" y4 r<script>
! q$ A/ _4 m- D' d+ l; |, ]5 cimport todoItem from "@/components/item.vue";2 ~7 P, F b" p# f- f/ c% E
3 [4 i& k. g: L" t j/ c
export default {8 G! X2 i/ e' v& E
data: function() {. d, X1 t2 g; }. T1 d6 }) W
return {1 k8 K; H+ M: B) U# p2 k/ ^ `( B
List: [],, j+ b; z' L" g4 u- T
inputValue: ""
3 \3 c* k* p# h% }, G" w) F };
1 m2 w3 p- ~9 J( L. u/ U5 S% c },
% p' ~6 i' l+ M; ~; ^5 B components: {
" b. M1 x- }3 i- [ ^/ X" t* R todoItem3 ]. |% Z4 o/ `/ r1 G, u/ L# X5 c
},
0 p0 f3 o, q. J" y* H1 i. V methods: {
1 d7 J0 U8 |6 I! p" N7 l submit: function() {1 e$ E- K" A! J, O$ _% Y( e0 c
if (this.inputValue != "") {
2 p2 I2 |7 A2 _5 @ this.List.push(this.inputValue);
; m" M" j' z4 w" _ }
5 n6 M, M! @4 U this.inputValue = "";
2 b' { z( B) ?. a; m( Y X },
8 u( g5 H& [* [5 X' J, ? handleDelete: function(index) {) {" h$ X5 e! X3 a; Z
this.List.splice(index, 1);* E; C, k6 X9 ?3 U' z
}
! \% i0 Q+ t! `0 c7 ] }5 N9 S1 w! V* Y% {; \8 F
};
" O" _# D7 c! r, F5 h3 U' \4 G6 N1 a</script>
5 I# A) @' z2 Z: g% {! N
" A8 Z& z( s. O' c3 I- _ Q" l' c1 H, ~
7 t9 g$ J. S8 e( ^3 Q
9 d7 E# [9 g& c% c8 h# z5 v# w( [
2 Y2 m% U# N9 U6 S( m# q
- z" j x7 G4 v8 O/ Z2 {
* n2 j3 X* m- d9 n1 N* b/ Z1 K<template>4 T& ?( \7 L: V$ w
<li @click="deleteItem">{{content}}</li>! l* p: B# U; d( ~+ w
</template>8 P& t M* G! V6 K7 P5 G5 ]6 r
p S5 w- P: S% `
<script>4 s3 [! G- e& U" B$ F4 Q8 Y; d
export default {% ^! ^1 C' B4 q& L, {% v [
props: ["content", "index"],3 j# c0 |' Y& n9 d
data: function() {7 E: y! C5 Q( q6 J0 a. W7 u) A
return {};
+ @$ \* g. w5 u7 e3 w },4 f, \ m, M! p- ?6 N, C! a1 W; u. P( S- q
methods: {
1 k: m, o% @+ h- s deleteItem: function() {
5 c" e; W8 [/ x! s5 @+ q/ ] this.$emit("delete", this.index);
! u" X( X6 t( v z5 _- j# f2 n8 j. j }
; t7 c/ u. t: s' y" h }, b& U$ J9 `$ A9 k8 G, g7 [
};
' J- e8 W. g' D ^6 T8 [</script>
, K! o6 `1 p" R2 ~' I' X$ u {5 b% z8 r4 D& S" E
; J. c n# S7 x; n% a# o
) O0 B% A6 m A" S
6 `! J5 J) {3 y5 b/ e |
|