组件方式开发todolist

admin

- a& F( Q2 N" o6 M/ B
* O( w" `2 R  s+ V
- G5 t" [9 a" f
1 ?  H! F: C/ u) S<template>
  <div id="App">
8 e1 J: [2 ~" N0 H3 u1 P% U& o4 X    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
7 b& v% J* f3 W& q9 [& \. t3 E0 o( V    <ul>
      <todoItem
. R+ e0 D( q3 {: q2 T, U* j0 ?  o& _) @        v-for="(item,index) in List"
2 Q0 {) D6 L  }7 v* n        :key="index"
        :content="item"
2 I! f% F2 H8 S0 N        :index="index"
        @delete="handleDelete"
9 c! o9 O) k( ?# w. S! R# ^+ `5 m3 A      ></todoItem>
( {! A  I3 h+ T+ Q1 {. U# k* o    </ul>
  </div>
% B9 y; e( o; A1 w8 R( z/ g</template>

<script>
import todoItem from "@/components/item.vue";
: e$ @' M! ], k+ E1 y1 H
& ~7 N3 J7 S2 kexport default {
  data: function() {
    return {
& O9 Z- h0 t4 f8 r; r: f! n3 H      List: [],
6 H- W1 V& l$ N: [! d* y      inputValue: ""
    };
  },
  components: {
    todoItem
  },
9 j$ e2 Z+ _# U6 Z0 S) {  methods: {
; L7 F7 J! M4 x9 o3 `' T    submit: function() {
6 h- M  C* i+ f6 w1 o) Y4 e      if (this.inputValue != "") {
, _* G+ o* T, v. y6 s. \        this.List.push(this.inputValue);
. r9 T7 S" |7 y0 ^6 y, r      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
7 g3 R: A+ @4 p) P  c1 a9 i};
9 C) ~  d" z3 ]5 f" U% M# ~</script>


, y+ I' z5 d: U3 Y3 z
  R" f- L4 a+ J( f- e$ j



+ }4 k( ~+ V4 a2 E- Q1 C<template>
. T8 M; [1 Q( W6 e1 V0 i. A* l  <li @click="deleteItem">{{content}}</li>
</template>

3 u3 H. }, q' M8 J2 Q1 }<script>
export default {
% {8 T- ~, X9 C4 N* h* S- c9 l, y  props: ["content", "index"],
  data: function() {
9 I+ E8 }! w1 j: O) v0 x" n    return {};
& P- a* [8 K4 U9 m& f0 X7 b  r  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
+ X8 z9 W, b& s  }
};
: q/ ], A* G* G: K4 a( ?) d</script>
; i) n/ \0 V7 ^; l
. b! @7 q  O  ^9 _# C, {2 w
+ f& P# [* }: |' e$ c& {1 ?5 S2 ~