组件方式开发todolist

admin

# B( r4 Y5 T$ s0 k2 M

) E; p% V. v( C) z5 x* [, u" l! `: X<template>
  <div id="App">
    <input v-model="inputValue" />
( H1 Z' @5 L, `! e1 e, g% G    <button @click="submit">Submit</button>
) K9 O% \7 j) j" |    <ul>
8 f# E3 |6 \2 z: Z# S$ l% i+ S/ t# {      <todoItem
        v-for="(item,index) in List"
) b# x0 T) `8 K  i' i! j        :key="index"
        :content="item"
! k* o$ q" y- F6 h        :index="index"
6 W$ a& i' T. m" J+ c9 B6 d. l        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
</template>
. Y% G* F! s* C' E
<script>
+ g2 V) e+ _* p; t# uimport todoItem from "@/components/item.vue";
0 f0 [8 ]( w$ w! g2 D' w! k1 W
+ e7 f/ t0 `  aexport default {
8 X1 p# r$ K% W5 d- Y7 F/ p  data: function() {
    return {
      List: [],
; Q. |6 s! w# O7 f! E, N, F      inputValue: ""
    };
  v* L) s# G  _2 X3 e4 ?; t0 Q  },
  components: {
    todoItem
6 x, D! x1 W% C' ?; i  },
' W* \( @6 J9 p* E# _  methods: {
7 T' C7 l, L5 j    submit: function() {
3 Q, D5 t: \( R1 ^' y      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
- S- ?; ]7 t: y" [$ k, H% x" p3 E3 v    },
    handleDelete: function(index) {
. F5 i% s5 s( a# R6 {. q      this.List.splice(index, 1);
    }
  }
/ ]- e$ H) @/ L0 \- W};
. X8 R% K5 D3 w& N6 b6 c' b2 m( \</script>




5 D9 k. [: h9 a2 D


<template>
! o" w% J, D; u3 o( C8 M' @  <li @click="deleteItem">{{content}}</li>
4 t3 U/ z5 g7 A1 L4 F</template>

<script>
export default {
6 Z8 l% ]) b: ?. e0 `  props: ["content", "index"],
  data: function() {
    return {};
6 P1 W" a2 X# J8 T, i' g4 ^  },
  methods: {
. H. [# I; l0 [# I7 O, q    deleteItem: function() {
      this.$emit("delete", this.index);
2 O8 d: S2 O& O  ~* u0 T% u    }
  }
};
0 e- ]9 r8 j! `4 V</script>

3 q; E3 ~/ ^9 v2 |1 I; N1 y

$ M6 p' e6 T  f# ]8 s