组件方式开发todolist

admin

: @3 V( `: H3 l* a8 v


<template>
  <div id="App">
% e9 i% Z" F2 ~, ]* p  c    <input v-model="inputValue" />
: A1 A5 b3 x/ K" Z    <button @click="submit">Submit</button>
  E$ y. x/ K* F) u    <ul>
6 r3 Q# o, Z. `5 [7 x      <todoItem
        v-for="(item,index) in List"
* p' i' ]$ ~/ w* R        :key="index"
, i  ^/ [: V' Y9 f        :content="item"
        :index="index"
/ M, j! u: |% M* E        @delete="handleDelete"
3 r* N1 l5 }+ k$ o      ></todoItem>
* P; p$ K5 }1 `* N' a+ M    </ul>
  </div>
</template>
+ o* L4 ]2 `5 w# I8 ^* v! D6 o' g
0 ~- n- c2 c0 m, u9 @% k' O* @<script>
" @6 t. |; o2 Uimport todoItem from "@/components/item.vue";
: L; h6 K: e5 c/ Q% F1 ^) j6 D5 T
export default {
( E+ `, C2 z0 J7 r8 e' F  data: function() {
0 t! _: Y7 b) h; g) c  K    return {
      List: [],
      inputValue: ""
    };
1 A5 A( K% J7 y+ q" X  },
  components: {
) Q6 l$ Y; ]( n% |  O9 P    todoItem
  },
  methods: {
# ^* H  T+ Z" q$ Z1 e    submit: function() {
      if (this.inputValue != "") {
. q: V1 [# S! w, I+ S9 P        this.List.push(this.inputValue);
      }
      this.inputValue = "";
( c( X. V9 U. g% [. g9 }$ E  [* R    },
1 ?: I6 n6 O" ^: K& ^. ?/ B5 t7 B    handleDelete: function(index) {
; }5 y! j. g+ Y" f4 X      this.List.splice(index, 1);
    }
, L; M2 j; C) @5 _. @# c% p/ M  }
) f5 W  O- z: N' N2 ]; |};
- A/ v8 V* N4 f  Z7 {* n</script>

- ~5 g0 _1 u% D9 L+ A- f1 q
9 T' }9 b$ Q1 N4 o0 M( t

- z, f1 b4 |. i3 i: J
) w+ U+ X. l1 `
! r3 z' F" `6 J+ b
. b" d% }1 z* ~+ m6 q& F<template>
) t  U2 K! i! _  Z5 {' i  <li @click="deleteItem">{{content}}</li>
</template>
" Q2 W( L  z. Q- S' @: d$ s! W. \& z" l
! Q& L0 E# E1 x. R% k<script>
- Q' Y3 {9 m/ ^$ d0 p7 u. M" }+ Rexport default {
; v, m6 M2 u$ k6 O4 F  props: ["content", "index"],
  data: function() {
0 K: ]# G" p# ~% @+ n3 b    return {};
  },
* l& }* T8 O) {  methods: {
7 \) n/ H+ l2 M* u# O0 y2 a    deleteItem: function() {
8 h' e( f$ V, }% v      this.$emit("delete", this.index);
# Z8 K- q6 v1 C: Y' w' X    }
  }
' C- `' s; `  a9 d};
( k9 B: \& |6 V+ Z% g  ^% N</script>

# L) U( g5 g4 v) U7 v) ~" i. P

" L  {+ b0 G8 q6 |