组件方式开发todolist

admin

: n+ y" \% o, @& `$ f8 R

/ {# q! _; M3 t7 ]+ J" O<template>
  <div id="App">
    <input v-model="inputValue" />
% z* x9 i4 G5 U4 H9 n# p    <button @click="submit">Submit</button>
7 w; ]/ M, O+ I& J" G8 C( Y    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
) @8 w% B6 l3 E- u2 g5 r3 [        :index="index"
        @delete="handleDelete"
      ></todoItem>
$ a/ I& \( |7 r# G# _  V  ]" r    </ul>
  </div>
</template>
& Y! K, c' e' |
<script>
8 o) @/ T/ a5 M* z* mimport todoItem from "@/components/item.vue";
1 W% j0 l  Z+ p5 Y9 p( r/ G
0 s+ Q2 R: r7 ^* h6 b) |export default {
  data: function() {
0 {* e, Y) p! b  d$ ~    return {
      List: [],
      inputValue: ""
    };
  },
  components: {
  _$ }( @% j: h7 p    todoItem
8 h9 }5 {: I: L" F  },
% S, W; B" D  C5 w% r6 I  methods: {
    submit: function() {
      if (this.inputValue != "") {
) @3 U) B3 }2 ^; x5 x4 i4 n        this.List.push(this.inputValue);
      }
& r. d4 H7 K9 N% J      this.inputValue = "";
    },
1 j4 x% K6 u0 @# W( v, B- ?    handleDelete: function(index) {
9 m9 m: A% Y* [/ j      this.List.splice(index, 1);
    }
  }
  O  ~& G  x. A' M7 W};
7 `3 \+ j' B3 J* P9 m* s</script>
* R4 O3 M$ S; e/ @: a$ Y: a# B

9 V& s+ d, T; l0 N

. X# S+ c* I8 I2 G4 G6 L


' M/ b5 d$ Y! w/ ]; R<template>
  <li @click="deleteItem">{{content}}</li>
# X* j! w' l7 S: A+ |8 u</template>
2 n3 Z% B, i( w) Y+ I# a0 j( a
<script>
export default {
: X/ U+ v; S7 h/ G, V  props: ["content", "index"],
  data: function() {
  n* F. L  i  S/ [, M0 o    return {};
$ w' l$ ~" b* K+ G8 s$ P  },
  methods: {
0 `; O: p" I8 j. |7 ~" ^    deleteItem: function() {
      this.$emit("delete", this.index);
, e5 Q: \3 a( I$ {    }
  }
; h, D! ]# R2 R  `: m" T};
</script>

- `# y& l" |! e$ M* ?$ T3 T& o