|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 Y- H3 z" ^5 ^1 A, N4 l' f9 u% _' g5 O( C- p/ b2 j
) g/ Q+ [* s2 G$ m* g* |5 V$ Y
3 J) ~$ N3 r% R) d9 l6 y: d$ U; ]<template>
1 n+ u2 U$ o; h3 R5 o) ? <div id="App">4 h" T8 O0 j9 U. u; b9 T4 J
<input v-model="inputValue" />) V+ Q% U" ], j3 Q
<button @click="submit">Submit</button>
: g- N- p) {" u9 K0 R <ul>) ]; K' N! }3 M
<todoItem$ |: E: u! J8 a& Y
v-for="(item,index) in List"
7 B! j3 G {+ @ z6 ?" c( B+ c9 D :key="index", L M6 X1 p* I
:content="item"/ R8 j" N2 @1 f) X2 a8 E
:index="index"! }9 ?) |2 r N7 z
@delete="handleDelete"
$ L) e9 b* _3 f C$ S6 M1 r ></todoItem>+ Q$ Q3 e, m6 M' \) b1 M! M
</ul>- V$ _' j- b, D. z% A6 S
</div>- ~, z4 S% N w& k) ^
</template>
# v, v6 `$ B! W0 W: A- Y8 G O, o8 P& {, A+ g
<script>
- ]- Q) b, G3 `* g/ ]import todoItem from "@/components/item.vue";6 P; Z; e1 b1 U
" g& O# ? h% O3 E0 a4 c& X
export default {5 R4 V1 r) m" Q- v( d
data: function() {
( J, M+ H1 y& X$ s return {
3 q! k! w/ R9 }: {9 g) p List: [],
+ i; k4 u# x/ ?' k& ]# q3 G inputValue: ""# A/ g+ y: ^" S
};, D0 @! \* S* N% x# x$ T
},
3 J! G+ b$ P* q" n: S1 g components: {
8 c7 _' \* P( F2 @ todoItem
7 C+ L4 a3 L5 S },9 u2 Z+ ?* _3 |6 Q3 ?/ k
methods: {
, q) O/ R8 p% B5 ? submit: function() {9 P4 u6 }; _/ P, {
if (this.inputValue != "") {
6 K# ?4 q/ V& z p( R. S this.List.push(this.inputValue);
8 O y( H' B0 X- Y }
' @7 K* o6 e: P+ U8 v' F) H' b this.inputValue = "";
0 D' c* ?* H; C1 `) v' I+ j+ Z M2 g },+ F( \& M' }0 A2 {" |- M( p2 ^
handleDelete: function(index) {
, c9 C" ^! S7 r9 E0 f this.List.splice(index, 1);
+ s" x @ I% ~7 j* M3 d# y" M/ s0 h }
' i& u* B7 S- C1 B% ]2 M }5 Q$ W$ x4 O5 r% S: p, |
};
6 v7 T# A3 ]: B) _6 c</script>
9 t" \. R* i& s ^
9 ^' O( S3 m5 Z
5 Q% j1 A5 \& q# d# |- ?
9 O( V0 Q+ J& V6 g: H+ K. q4 b/ ]
} L0 h: j4 ~2 U; _% P3 |; o- B
( v1 N9 O; t$ L5 `* E' A. z* U2 `5 @* ?) B2 |" G
& }# N D8 |) h3 V3 G& {
<template>
+ Q4 E1 P1 | ^ <li @click="deleteItem">{{content}}</li>3 E. N5 J& I" |3 v
</template>
s0 q; d% A) r$ p8 T% B2 L4 y# S% s; ~ i) N$ a
<script>
: x/ Y; U8 @# V3 P" _5 Sexport default {: u0 k1 [. s+ h# J
props: ["content", "index"],5 H) M$ H \, L: u( O% N
data: function() {
( f; I! x' z2 v! B. |- h return {};
/ M2 t7 `* G6 s) |% m. F' V },7 K. Y2 L3 @6 f
methods: {
2 o- q, a" `& A0 C' m deleteItem: function() {
( N. c$ `5 ], Z0 P$ B* | this.$emit("delete", this.index);
, v" W( M' y2 `! l4 [' o" L: Q }
% u" d7 Y0 Z" B4 W% U6 e }
2 _* ]: K( I7 u- \};
* Q$ ^) k* C1 j/ i9 p* w$ n/ Y</script>+ O8 V/ r5 S; b" }
2 \0 ?' L0 H: l k4 ]6 a: v& O6 C! z% n
7 Q! ]7 y- F5 t. B1 O9 n% @0 K* e" o5 Z4 P( L
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
