组件方式开发todolist

admin

+ W+ b  V& Z/ h1 a1 V
; t# t" }" |/ r1 e0 J: C; M<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
; K! V! q+ f" ?! O# x  </div>
( [9 k# L& j# n- Q( j" ^</template>

<script>
import todoItem from "@/components/item.vue";
, _4 n) f- e& _7 d+ T
+ `  b* t, Z  W' m& Uexport default {
  data: function() {
    return {
      List: [],
  M: k" }- r2 G      inputValue: ""
    };
  },
  components: {
: _) s* h1 p* K7 n- d- p' j" f    todoItem
  },
5 S0 d& a$ F: X: `  methods: {
    submit: function() {
* v6 a* w/ J3 o2 a7 _+ i# f      if (this.inputValue != "") {
6 f. g$ v- F8 |        this.List.push(this.inputValue);
: {' J: J. L9 _. Y) [/ A      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
3 e1 p" v8 @5 c; O0 m  }
};
</script>


! ?" m$ v% O7 J
1 H5 c: M$ U9 B3 ~( V  s2 E' w
" N( s0 X3 }& D& w, Q! U


( X8 B, @( I* T# l5 V, O<template>
0 D& P( f' Z7 I  <li @click="deleteItem">{{content}}</li>
</template>
& D- A, W; m' z
<script>
export default {
  props: ["content", "index"],
. K9 Y' z; k& E1 l  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
4 D5 h! }( G3 F  `3 L# O: u8 ~      this.$emit("delete", this.index);
- _6 l9 K- K% _4 N    }
  }
7 C8 x8 U' T. h; I};
</script>

1 e9 n6 t7 S+ ]7 ~
) Y$ N6 O3 o5 Y( p8 n

5 |6 [( d7 C6 n" O; u& Z( E6 W