|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: n8 n9 d0 }" g& i: z
' S: G- F! s$ t
$ @' e6 ~( x2 Q% B9 j) n
5 O, j; ?; r* m2 n<!DOCTYPE html>
& a k% N& X4 O<html lang="en">
9 E8 ~, l3 J: u5 v<head>
& }+ v7 i. ]6 ^- s <meta charset="UTF-8">5 u% A; b5 x! L; e( i
<title>to Do list</title>
8 `( x9 c# f% C' ^+ Y5 b( R <script src="./vue.js"></script>
7 |* z$ T4 I8 J( @( m</head>
0 v$ A7 E, ^4 L3 e3 J/ f. r+ c6 P<body>2 X3 R; u) @6 U2 R% L8 o
<div id="root">
C7 q' w; G: p4 s- l% {9 z <input type="text" v-model="inputVaule" />
5 g. n8 i& A% Z <button @click="Submit">Submit</button>
8 `- g6 w3 b4 q: d8 H6 ^ <ul>" q' b3 W V. I. b* A: U+ d6 y& ~& b# [
<todo-item v-for="(item,index) in List"
1 r2 G0 k1 _, |" T3 _# K) W :key="index" 2 s" Z+ b" [: q# l; U, W' e) r# v
:content="item" ' N( ?' T" \6 W; y! u! L
:index="index"
5 A3 n3 I4 n. q H! X! E/ v+ i @delete="handleDelete"
w8 C) r5 Z8 T3 x >
" @, m1 d3 S; C1 c </todo-item>3 U3 @2 q/ W( t5 e* U
</ul>
$ j. g! m T4 w/ U1 f& L4 C </div>
Y; {, A7 I# x u <script>
* `4 i2 t( D, G# A- D; N* a Vue.component('todo-item', {
2 U3 F! f- I& K props: ['content','index'],1 }+ O1 f7 _6 F. }% @: }6 H( q0 [
template: '<li @click="deleteRow">{{content}}</li>',
H' X& o4 q8 u- ~2 o1 V B' q methods: {
0 n% [' d; [+ K# E D* k deleteRow:function(){2 G: g) B7 e$ z7 y! ~& _
this.$emit('delete',this.index);8 R+ J. l3 v7 l8 U* u! D; a
}3 i% E5 G: ` w* o0 U
}
' t( h9 G& D+ ?* {# F })% O8 b/ c" I9 |* e
new Vue({7 F" g. Q ?% a, g# ]9 Y g
el: '#root',
' t$ J# d9 ^* `6 } Y$ p D* K# | data: {
8 w, d! b8 p6 A3 Q1 H u inputVaule: '',, |: p( e( O3 z
List: []9 v0 c. x/ V- A: q( i6 L$ {7 d: y
},
7 N' V4 }) C' @5 T methods: {$ X. r4 F7 i# L
Submit: function () { q4 i$ W2 l) R3 a
if (this.inputVaule != '') {4 ?3 i! c' b* Y' R% w
this.List.push(this.inputVaule);
\7 w" z c* g4 e2 v$ g }
0 M0 G' A( P D! l this.inputVaule = '';
5 H! F& c0 w Q },+ c! c9 g& e( B5 E* U8 n
handleDelete: function(index) {
+ z. z) c/ o% W9 i A) Z O& Q' W this.List.splice(index,1); # @. R' ~! C c) d
}( E. c' Q% \; T6 m
}; H( p4 b# Y1 l: P
}); o3 X+ Z+ P9 K# S) ^0 B+ k
</script>; ]' d% M- k% P: }4 S
</body>$ l1 a# q% }* F: a. A9 G. C! A; J
</html>% ?, ?' y1 N( N% r' D2 O# y# S
) C6 i5 C% M) [/ K2 N
+ p9 C U/ ^4 x. j' [ |
|