组件方式开发todolist

admin

+ v; V- F+ u" C4 M

<template>
  <div id="App">
    <input v-model="inputValue" />
8 `; {3 k' o% f! I5 g3 q$ p; T    <button @click="submit">Submit</button>
7 J  c7 d! O) i2 O! _    <ul>
4 _' {  _3 v3 u5 {7 L  o      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
% x3 \8 v& H- e; H8 W        :index="index"
        @delete="handleDelete"
% V1 P/ B8 N6 Z' v- Z      ></todoItem>
    </ul>
  </div>
</template>
* P" r+ A; X+ n& p: c: L
<script>
import todoItem from "@/components/item.vue";
; v+ u* T( W* y& \7 ^1 U; R
export default {
8 C+ L' U% l! r, f1 ]/ M  data: function() {
- D/ e: G  p3 B+ |    return {
      List: [],
; ?' o0 F1 m  f- K/ ^. ~4 u7 c      inputValue: ""
    };
  },
  components: {
3 ?; s. r! w, L' Z    todoItem
4 a. M9 Y, `! c/ M- X  },
  methods: {
    submit: function() {
: p0 U- w2 k* o5 u, c      if (this.inputValue != "") {
; `/ w; |* F8 C( k( C! b' e5 l. i        this.List.push(this.inputValue);
      }
8 W4 J% \7 j6 D" M' I% u( N      this.inputValue = "";
- Z0 G2 H5 M9 b: C7 @+ P    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
5 {* G9 X/ I- a8 M4 T/ H) h  j* k% T};
6 C: u; C; O' f2 j( D, Q2 o& X& m! I</script>
3 v5 l0 g5 z0 T8 x% @* s  B

' O2 m( j3 E# l8 y# a9 }

& Y( J* W5 C. t- M) O

6 L, ?# C# K9 q
<template>
, s8 m( X) V- K" e, x% X* T8 V7 Z  <li @click="deleteItem">{{content}}</li>
</template>

' M/ h5 O- Z+ ?<script>
export default {
4 V2 f5 b1 B8 ~0 i" c8 y: G5 |3 g  props: ["content", "index"],
  data: function() {
, s+ G5 C$ D& H" Y    return {};
  },
3 C' n% T% |2 \0 D/ A  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
1 b6 M* R9 n4 {+ I</script>

1 c1 d+ j$ ~2 r0 ~9 J' X

  v, T; {5 S) d. G" I1 c2 S' a$ P