|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
+ |7 K/ Z& d5 O6 ]+ ]* Y
. f3 M* M6 D$ l3 K( V/ @2 G
- K1 j3 _2 n7 R- p V5 j
2 f0 _1 ]: I- `8 f9 `<template>- H( k6 {% ~" d9 g0 k& q) O
<div id="App">' d+ P* b( j! i# x' [6 c5 o
<input v-model="inputValue" />2 A6 i# I& f1 M# k) V, U
<button @click="submit">Submit</button>, z' O% G$ i1 `+ a- o m. u7 z
<ul>
7 o4 S0 e% X* s* E" s# | <todoItem
" v* q1 g! }" ]% ? v-for="(item,index) in List"
. j( ?$ { o6 Q :key="index"/ g$ p7 R+ z! ?% s
:content="item"9 }2 Q3 n0 @* ?8 K2 F0 V( V
:index="index" ?/ g5 E5 [- R* p. S* S, q
@delete="handleDelete"4 @) u- y7 \8 y9 B* d4 g
></todoItem>
; n( C5 H* P' }$ G4 ^& b2 r </ul>
$ W$ Q3 ?" U( I5 j! w </div>
# @/ i8 d5 Y7 R; e' ?) ~' Y</template>
) |- m' L4 w; h _) j; U6 N
: B4 Y% T! ]' H/ _<script>
4 c: f0 U) o$ Aimport todoItem from "@/components/item.vue";
( J. [2 I" r4 \ L3 V$ |
" d3 k& P! @5 K2 S ]export default {
6 b6 Q5 Q4 Y( m data: function() {6 d: F8 K% p6 |# q$ e
return {
1 e, S: ^( v9 B' y8 t& G List: [],6 N: `& _: ~. [: p- z( [0 W( H
inputValue: ""
6 a% \; W* v+ D; { };; K! s+ {8 u& _, w" j- G, h% c( G
},
, P$ o, X$ c! Q" V components: {
/ j3 z' Y; t! F todoItem. H; U7 M7 h8 T% K/ ^3 M
},$ }, _2 D; }8 i* G) W' w
methods: {
0 E& K6 R" x% M/ ~- G- A2 \ submit: function() {
7 o+ V# v5 N/ t) E) w" c3 S if (this.inputValue != "") {9 u9 E9 B7 s. v" n, F9 v3 u# [
this.List.push(this.inputValue);
6 g4 L" N9 d0 V4 }' ~ }
8 \0 k8 {3 ?7 Q0 [- t* r5 x this.inputValue = "";
- _# m- D* t. D. W! b: s6 X8 f },0 P4 T" L) X- q- d8 w# B0 H5 H& O
handleDelete: function(index) {
: W7 Y2 u5 Q; k. k4 y this.List.splice(index, 1);
! E0 r7 q6 k3 ^% k6 e$ F- F }
. F5 J$ ?1 z. @' h }& v" _7 e) O/ ?& o
};$ t7 T& ?; T" B' W: B
</script>
) g0 U- Z5 Q1 b( G2 K5 Y8 j' D6 T% i# m' t- j" R+ H8 B7 b9 V
' s9 Z9 q4 \3 X' ?. M, B
4 _: H9 {" H( A! o8 v7 C4 F6 V, }' k% \: ~6 w* {3 f% X
( f8 A7 W0 v2 g! n; }
r1 B. ^, N# i0 u
5 a3 D) R6 I! b: o" e' l$ [' F<template>
- L2 w2 X* y: D2 t4 `; ^* Q) M <li @click="deleteItem">{{content}}</li>
" D' Y0 ], w8 n</template>
2 v. e- p$ M' a) R0 Z& d! K7 P. Q9 ~% q# v# V8 k
<script>
! B4 {3 F$ H6 M- Y9 fexport default {
5 i- Y+ D" L$ d0 W props: ["content", "index"],0 X$ K/ X% a; o7 z' F# a- X
data: function() {
/ ], a1 A2 F5 S return {};
& k# V+ ~/ D5 T q$ r* C' w8 Q2 P3 f },+ ]4 c+ K. H* ~+ \8 D: H
methods: {; i* ~2 N9 C- i7 h1 S
deleteItem: function() {
/ P( m3 b. D4 P* z1 m this.$emit("delete", this.index);4 s, y `5 n4 l7 u. X
}
! i. Y6 W+ Q" A6 Q5 c }
3 n) i. n; `+ f ~9 n. B};# q7 k. }4 S# h/ q; d# s
</script>
- e. B; s/ Z5 }8 e2 c& p( o; ^* k: z* N! k% |
$ z; U+ D4 C* Y; M# t- H
% X0 y8 r. z9 B: E: j) Q% X; u4 _& m" T) G' g' f
|
|