组件方式开发todolist

admin

4 ^, `+ h. I9 [2 g' f% E
. P! H4 q  D# y

* d6 \  U. r, V! n<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
; Z% |# z9 k# D: P0 K5 [/ h0 x        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
8 @- B$ |3 J" W2 R0 N" y        @delete="handleDelete"
1 c. @, S, a; I2 h, S+ R: s& i& |      ></todoItem>
; o+ s6 ~+ i( p) Y# x, k- I6 m3 V    </ul>
  </div>
</template>
5 @( h- s& d5 {( T
( H  D$ q& d* Q4 ~% o<script>
* K5 X, Y% o/ W  A$ vimport todoItem from "@/components/item.vue";

" l* X. O. x9 ^export default {
  data: function() {
    return {
! T, G' a! J9 t6 i, b' t, K* F2 O      List: [],
      inputValue: ""
    };
  },
  components: {
& Z/ v/ [( }' }    todoItem
  j5 {, L2 t% U+ W, n; P: k  },
5 q' V7 r  O% p' U0 N, M- F' t  methods: {
! M7 `: k; X$ s5 X    submit: function() {
      if (this.inputValue != "") {
7 R) G8 u, c+ ]3 ?! q, S        this.List.push(this.inputValue);
* c2 g6 E2 y+ a; a3 W      }
      this.inputValue = "";
    },
+ D) D  G, Z+ N& \; Q2 h    handleDelete: function(index) {
5 k% o/ |9 f7 i3 y3 M/ E$ j      this.List.splice(index, 1);
/ r6 f: m0 j! _& D7 U0 o0 b    }
; N  x  }% \9 X( S8 p1 P" V! ]. R  }
/ V+ G. Y2 D/ N$ X6 r};
</script>
2 W4 T5 c" ~' u$ H( V
! Q) l/ @$ i* }
0 U8 b7 L4 X- A2 Q! ]% c1 E
4 J$ D3 S1 [. N
* L0 g" m7 i: l1 X* y  \5 S1 f+ Z

# Y$ J4 B5 H# `% ^  x
7 B: q) v9 z2 G/ X' G<template>
  <li @click="deleteItem">{{content}}</li>
</template>

2 o- P* H/ H7 b; H% f<script>
export default {
  props: ["content", "index"],
3 F9 L. m  h8 g9 {  data: function() {
    return {};
  },
% C0 _  F8 @6 @, j% [# @  methods: {
    deleteItem: function() {
; E1 G/ E/ S  p! S2 d( S' x      this.$emit("delete", this.index);
4 f! r# j) ?. q( A3 k$ z5 M5 G& X    }
: m0 I2 u% g1 A* D: X$ G, P  }
$ i2 R5 s/ t4 j) Z1 M! C};
' n) p( E% }5 o, v3 ^</script>
! L# y* U  y# m

$ e8 r3 f, r$ B: d. U1 F/ I

4 d# Y1 I' u. @: w. g2 g. T