组件方式开发todolist

admin

: f1 d) f7 c6 L8 n  J0 ]
* v: g) `& y4 B6 ]

5 `* Y; w6 K. Q4 i( W<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
) ^. C# [2 m( G% e      <todoItem
        v-for="(item,index) in List"
6 _2 D# N6 M8 G# E: b  l        :key="index"
2 F5 g4 i, r" m; G, _% @8 o        :content="item"
        :index="index"
        @delete="handleDelete"
# }: p3 K. _2 p8 W7 U- a8 _6 a      ></todoItem>
+ w; {$ o6 b- |4 @- n  w9 Z    </ul>
" N/ V4 y! B. s( z  </div>
- d- z1 ~: v6 S$ z9 n- G</template>
3 T2 b" g# G, j- g4 u1 J9 e
+ s: i; u/ Q5 L$ Z+ z3 _7 {) L<script>
5 ~' R" D- D8 ?$ ]5 J  x2 k. jimport todoItem from "@/components/item.vue";
; f  Y& K8 a1 N" L: f; K
export default {
  data: function() {
    return {
" y' ~+ l; S( g% _1 E* F, a      List: [],
' [* O" E( `% @1 v      inputValue: ""
    };
- R2 k, }# \( H* a0 j  },
  components: {
+ j8 J1 \# o% X+ r0 k" d, x    todoItem
  },
  methods: {
    submit: function() {
, n7 o" W  U7 v/ i" @2 _      if (this.inputValue != "") {
        this.List.push(this.inputValue);
1 x2 E' b: K4 e2 V+ x      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
$ f% w' z& b. ]1 R4 ~  }
9 c' g1 ~/ @& k" ?; B! F0 @};
</script>

  J9 M1 ?  V* ^  J0 R& Q7 c
5 ^# b3 \( @6 D  i9 P# U5 H



! _8 Z* y  n$ b$ |: p* c/ u
<template>
8 g1 |) Q! ]8 S) C  Y8 v- r" l& L/ \  <li @click="deleteItem">{{content}}</li>
</template>
1 M. Z  [% [* `
/ t% p7 ?7 ~$ c4 G<script>
7 f. p3 E! u9 _1 K' ~4 i- ?0 bexport default {
" U; P* u& q' S2 E# p  props: ["content", "index"],
  data: function() {
( y: x& c$ [3 U" Y9 W    return {};
  },
  methods: {
    deleteItem: function() {
1 f/ g- {) W2 M      this.$emit("delete", this.index);
3 \: D0 {9 l$ S9 E9 H    }
  }
, T% t# }: u8 a8 d- e; `$ y5 a5 X};
</script>
7 M) M+ x' p7 [& `
0 W7 P6 a: |* C+ f9 Z7 Q  c8 m