|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 T2 F' q7 `+ P1 }
5 E- [ X4 A: Q" Q4 Y
* w. o8 R t7 ~ ?4 L% O: p) H' T; Y/ o) n* ~
<!DOCTYPE html>
( W S$ {4 p9 O( l# q, z<html lang="en">
! K4 X' S. e' c! |% `4 S<head>. n5 u+ q- b4 E/ m/ n
<meta charset="UTF-8"> S. _ M+ X# C0 x% a. q
<title>to Do list</title>0 M/ L3 d1 w1 ^7 f
<script src="./vue.js"></script>0 U& |' g9 X$ }/ m1 T! `9 s' Z
</head>1 V/ W+ c& w% @) ]3 K h
<body>0 f0 r) I0 ], Z* u1 `* R" j
<div id="root">6 @, o1 @( f, V
<input type="text" v-model="inputVaule" />4 t& n! \: ]2 ?3 W
<button @click="Submit">Submit</button>
2 F8 b1 j) T) B1 ~5 Q& U$ g6 i ?& o <ul>
7 B# k- |' m. T% p <todo-item v-for="(item,index) in List"
8 V& }' @5 {! t- i( n3 c :key="index" $ @/ u' @( K. m$ [9 H1 F
:content="item"
1 ^& J( m& @% A2 A :index="index"! y4 k% P' R/ x- h& z3 r7 R# ^
@delete="handleDelete"
4 l# G/ w4 R: P' R. ?6 k( U: U >2 G, z3 Q. E. ]4 A$ c, C1 C* A
</todo-item>' O! i' {. O5 ^
</ul>
$ Y% t. ~ p8 z0 {$ x' r </div>
, s. E! @ w9 |- j' {0 J <script>! g* |. H3 h9 I$ o' r+ ~6 x
Vue.component('todo-item', {8 q7 X. \* l$ j! j- t
props: ['content','index'],( H. E; S1 L% ]- @* c5 j9 H
template: '<li @click="deleteRow">{{content}}</li>',
/ B' z4 R) y0 E% y) B s! p methods: {( [7 E; b7 p" i6 Q, U
deleteRow:function(){
" p* [- ?* J8 t( l) z this.$emit('delete',this.index);6 J* i& w$ O+ d5 J# I T2 T6 z
}+ B) N# B, |6 ?! R6 W
}6 T- K! M) |5 u/ n& R: y$ t
})
! G; E. e/ X) G' b new Vue({, K7 t+ i& [8 M; t& `$ J9 f8 }/ z
el: '#root',
, |1 D# B1 ]% x5 |9 ] data: {1 o: o7 A* F. ^0 `+ C
inputVaule: '',6 u7 |( G! t* p0 F
List: []" ~# P/ y2 i5 ]. y2 {$ a4 g& O. R4 e
},
- w! f4 K" U G4 M- C methods: {7 D7 i. u5 H8 i, e, i. x
Submit: function () {6 R+ G! r. A% k& _" C2 i
if (this.inputVaule != '') {
' x8 G0 f, r. c& s2 h. C this.List.push(this.inputVaule);( _# d/ {7 T, N# o
}1 J" ~) P' m/ }& U7 {7 w4 x1 S
this.inputVaule = '';
$ f! l0 y p1 o. T },
9 o! g) U3 a1 V* l3 Z handleDelete: function(index) {$ i; v0 m1 A) q! _; b+ Q
this.List.splice(index,1); ) F" D+ D- o1 V& x1 d9 U9 r A
}
" f* E( X+ R4 t" D$ g }
, D% C8 ~! }( a F3 z })
; j: C. _& r/ I; A2 Z# s, a </script>& w7 R* u+ M/ N
</body>
( R6 q& g5 Y; I( ?</html>/ Q' r3 W* [* @
( x {5 B; S# Q$ o1 J: ^
4 P: [2 {- k' K2 S O" c& a% U
|
|