组件方式开发todolist

admin

, Q+ k- q/ }6 X* ]" M

1 p+ \: w; B. N$ q
- K9 T/ L7 Y9 {<template>
  <div id="App">
3 j! y7 J) T- q( @6 W$ k; _    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
* z5 H0 G+ {, b. _    <ul>
, |0 B7 q$ C7 I( j3 k      <todoItem
        v-for="(item,index) in List"
3 Z' H7 g# F/ t' k7 `& m) i( b        :key="index"
        :content="item"
% D0 [% o- o8 a* [; S- [        :index="index"
; v% [7 K5 h* ^; [9 j/ L% j( O% k" A        @delete="handleDelete"
; Y. p# d% _. U: Q- J3 n9 }9 c8 p0 v& k      ></todoItem>
    </ul>
( u" F0 A8 J9 [  </div>
0 b: ~1 y  h# F0 ~3 w</template>

<script>
import todoItem from "@/components/item.vue";

export default {
' c0 l0 b- f$ g& M: o  |  data: function() {
    return {
      List: [],
      inputValue: ""
# \2 g' z( \- Q( k    };
  },
  components: {
    todoItem
/ m# i+ t3 K. p  E5 c  },
3 [$ a+ m% V$ [+ T. I7 m  methods: {
    submit: function() {
      if (this.inputValue != "") {
2 _3 N6 o- W8 s  A  L7 w, x        this.List.push(this.inputValue);
      }
5 t, ~. \- u; M$ Q, l7 K      this.inputValue = "";
    },
    handleDelete: function(index) {
* U) P* T6 M! L; q      this.List.splice(index, 1);
4 x1 e5 l/ x0 o8 B3 L    }
2 v: G0 b8 C1 l" ^  }
};
</script>
; S# i  t7 x0 Q# o5 J4 y" m
+ t# j7 ]9 S+ K; t

! U' q! A$ }0 Y' y& z



5 A) n6 K6 ^1 ?5 M/ k9 @<template>
1 N" c0 O  l$ N. U6 P- A, T; d  <li @click="deleteItem">{{content}}</li>
2 Y1 G/ ~' U' n, `: c</template>
. W. q) b3 U8 W( f
<script>
1 l7 ]: B: d7 q( B! u/ iexport default {
# e+ ?; ]3 ?# K  props: ["content", "index"],
  data: function() {
) z1 Y0 x' n# c3 m" h2 @    return {};
5 o, n9 M% S6 D9 T  },
6 K# O4 W0 {8 C7 |9 }% e+ B1 o  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
( R; D$ t4 F3 C/ f" Z    }
  }
};
( ^* B. H+ O  R</script>
* x6 t  D5 M" _
, t, y% m( Z: @$ x


" L8 X* K' \+ c$ E5 Q5 U. \