组件方式开发todolist

admin

' O$ j; }3 T! X8 h, S4 p* m3 B/ B$ C  e

% w) }1 y1 p+ X6 g% K" L<template>
  <div id="App">
# f9 C; t8 V9 `2 K% Y6 e    <input v-model="inputValue" />
% n: S9 U, v0 O* t' g3 B    <button @click="submit">Submit</button>
    <ul>
' W& O7 \2 o2 b9 a3 e" J4 w      <todoItem
        v-for="(item,index) in List"
# c( `0 n' }" R, L; B: |6 Q! `        :key="index"
% n+ H, r, r3 [& Q) n8 l        :content="item"
- r4 J4 M' Z0 m$ G. X+ X        :index="index"
        @delete="handleDelete"
      ></todoItem>
% K- z! u' o! f    </ul>
" f8 g$ x& C. s  L! l3 ^4 D  </div>
6 M) ]7 K' l$ r. f7 d</template>

5 f1 h& G- b4 s* o% l4 y<script>
import todoItem from "@/components/item.vue";
& G4 b% ]( m! m+ S4 l3 ?3 T' C( g
export default {
  data: function() {
    return {
      List: [],
) l7 ^5 ]; t% j; H5 D- a- E      inputValue: ""
    };
% U" Y# _2 _4 h5 M  },
/ k1 x$ R! Y. k; |3 ~# S  components: {
, d# p1 e2 i& @4 \) O    todoItem
" L, d  `' L7 ^3 S' N6 s  },
  methods: {
$ @6 K" V" x' P! C( A    submit: function() {
' X2 A3 c$ p) ]2 W0 c2 t      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
0 s2 a5 x2 ^9 j+ ?# M      this.inputValue = "";
# X% m5 P$ M7 B' C  \    },
- P! c* l( |, w/ f0 y8 d    handleDelete: function(index) {
      this.List.splice(index, 1);
2 M5 J/ E1 [# l* L$ c    }
  s* n$ D4 \# t# P; D' ]  }
, h% d# U3 l! g! `};
</script>
% q- _: K% [3 A* ]& _* k

* J6 C2 N$ m7 o6 ]* E1 f. f

/ a& l. C$ P& O; @1 r7 x: |) o
1 G4 b, C- s; G5 ]: N; R- t; r
' H; G7 L8 Q; J8 q
( l- l9 G9 `# g; M8 C( I<template>
) J4 w8 O& `" s# B. i" S  <li @click="deleteItem">{{content}}</li>
: J4 A% O: K4 N* M0 U% n</template>

<script>
export default {
  props: ["content", "index"],
- v! w2 Q- ~" x; N  data: function() {
  A; j" u9 Y  h* g( v8 F0 F; s    return {};
  },
0 j2 I9 U+ p5 N9 ]5 H" P, n7 i8 M  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
; B& M/ @" L) ~4 @$ k    }
; x" e/ r% Z# S, h$ i  }
};
3 w; m  L" f9 F7 A</script>

! P$ X) A! N" H- _$ s+ Z2 v
6 L. Y  k7 S  @8 k. P
8 ^6 X; t+ n& U+ e$ p. t* r% z