组件方式开发todolist

admin

, S. _( y% l5 ^8 E3 e5 p5 h9 `
% c- L% A* h+ u" u
6 ?- V: X1 R+ V; ^+ |+ ^+ ~<template>
/ m( P7 H  ^! C$ V  <div id="App">
    <input v-model="inputValue" />
8 Y1 [/ W9 t) Y; P3 Z$ U9 N    <button @click="submit">Submit</button>
9 L9 F+ J6 D1 d% G% _1 w, M    <ul>
      <todoItem
6 C2 Q7 S- y4 M/ R  h- U* C        v-for="(item,index) in List"
- P: M2 |& M9 g( \        :key="index"
, y! \# X- Z- Y  p; R5 Q( n4 h        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
4 d1 U  Y2 g0 ?    </ul>
  </div>
7 K5 l8 G2 E3 R! T/ F8 R</template>

<script>
# }; A. v' d0 k; }, T$ d  Zimport todoItem from "@/components/item.vue";

  U5 \/ }$ |+ _! ^9 A& c" kexport default {
  data: function() {
6 D$ y# {$ p8 U& d7 k, E$ e6 X0 S7 O    return {
2 X) j( O0 U2 J1 V6 o      List: [],
3 V+ V+ |1 d0 w( D  C      inputValue: ""
    };
  },
7 ^, r; t2 b" C# Y* i6 o9 d0 ?9 O  components: {
    todoItem
1 G7 A0 s& \9 |. v1 @  q  H  },
- D7 O: g( J" U  methods: {
, U9 _; Y$ @5 Z# z; }8 t    submit: function() {
( S  }7 E0 U& R* V( Z      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
( Z" n- c+ @2 N# N7 D4 u6 U2 j1 V! D      this.List.splice(index, 1);
2 S/ D  F. G* e; L4 a- S2 e, k+ {, V0 o# d    }
2 W; F* j6 ]) r5 z. h, Q  }
};
. N" [+ V$ l/ U" R* g- G- s+ W</script>
& V. V4 @* b6 k- ?" n$ X
" G, E( U0 j6 U  H" A, I
* d, b. v8 P1 G+ q% n+ s  M

. I$ B/ }( _- N5 L, ^
1 k! q5 z  j* [. e

8 {. a5 f4 d) f7 r# \<template>
5 @. R6 g7 r* s& d  <li @click="deleteItem">{{content}}</li>
! p) w+ \, ^# X+ P5 |1 x</template>
8 e- ]( F. k/ u9 x+ _9 ~
<script>
export default {
2 n- t1 G: x- L: ]) z3 u$ b$ z, L  props: ["content", "index"],
& L* {* P2 \+ C- }. N5 _  data: function() {
    return {};
  },
  methods: {
& T' S2 p7 C# p& i1 h    deleteItem: function() {
; `- t4 N) t  D3 H( p2 h- F4 i      this.$emit("delete", this.index);
    }
# n: t+ _5 ]# M# N0 g  }
};
5 J+ q# L+ T3 a7 ?1 U0 y2 \</script>

8 q/ l( N7 d/ y. W# D
+ B4 c- X9 `% W1 f