组件方式开发todolist

admin

) z  v8 S; X& H) U! I
1 o0 k( \- [9 C% L<template>
4 Y$ v) e1 p$ |; C3 x  <div id="App">
    <input v-model="inputValue" />
( k: [6 H5 m. E9 A    <button @click="submit">Submit</button>
4 |2 Y: l  a" C8 i' e    <ul>
      <todoItem
- L" F; @6 N7 B4 B' x; c        v-for="(item,index) in List"
0 H! @! r( @4 B) }        :key="index"
) l3 K8 f' Q0 w1 R        :content="item"
% R: i: I! t% ?* E+ Q. q' k: F        :index="index"
8 @6 D/ M( L3 @' [9 w        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>
$ {3 {/ S/ G$ x' h7 a; C7 w
& O. m7 X  ^& q, H, w<script>
5 K. c( J0 A0 T/ E4 i& \import todoItem from "@/components/item.vue";

/ I8 z- G' |  C3 q$ e/ s4 l: }1 e" kexport default {
, W& F% L( N( s3 p3 R/ c+ T  data: function() {
    return {
5 y0 g4 b+ N  n0 k3 E8 f      List: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
7 P* i2 d/ i, `0 F2 L6 Y        this.List.push(this.inputValue);
1 ?; t) r4 Z" d' ]+ H: h      }
3 Y) D$ r+ h; d2 U. s      this.inputValue = "";
    },
( Z% f: f1 w/ p0 F& a5 I    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
/ h6 f1 T6 U# G4 _. f5 a};
</script>
+ _$ O& N0 c  B7 ?0 S* @, I
8 _! u# Y! R; z+ S5 O) [
9 S5 W% N8 ?- Z
2 U  q8 g  U3 p  x4 h' S. j7 Z* n


, \4 F$ ~3 M" N
1 b" u, C, b: |& w<template>
" ?7 B7 G" l. t6 K6 a0 T' q  <li @click="deleteItem">{{content}}</li>
. D+ p% s! @& }</template>

! E) U3 p5 t( U2 R" S: B<script>
5 B7 F# {9 Y2 T  Z5 Y' _5 rexport default {
8 {2 e8 |5 t2 O- ]: K  props: ["content", "index"],
* V, N" Y: ?3 E3 n5 C  data: function() {
) C' Q/ S  e% v! w    return {};
7 M( X4 K; I2 A5 |& X  },
+ [& h3 H' j! E  methods: {
/ |: o+ u6 N& n    deleteItem: function() {
7 g7 I) J# u; A3 }; b      this.$emit("delete", this.index);
    }
6 a% K' @8 L* v: L  }
7 z2 `8 l# |5 ~$ R( B; V};
+ A' c5 D* q0 x3 J3 \9 b9 Y</script>




1 i. t2 P! d1 r' s* L6 q8 P/ C6 d