组件方式开发todolist

admin

% E3 J6 x8 s3 r
! G3 }+ d3 o# q4 L5 y
: v' P% @. p( j7 q<template>
  <div id="App">
. v8 J/ g+ m! Q9 ?9 Y  z    <input v-model="inputValue" />
' i/ d  n" z9 `! o' ~  B    <button @click="submit">Submit</button>
    <ul>
      <todoItem
        v-for="(item,index) in List"
, ?0 v0 W! k; J        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
1 A7 G6 A" h' U3 Y7 X; y3 S" r      ></todoItem>
    </ul>
  </div>
</template>

<script>
! R! o; |% C2 |  f: O+ T. n7 dimport todoItem from "@/components/item.vue";
) Y5 r9 U! k2 z+ f9 }
export default {
  data: function() {
! V( Z+ A6 g* y    return {
      List: [],
% \7 M/ `4 Y8 @* R      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
. x* K9 n- j  Q% C7 z! \      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
6 ], }. e, p5 @  l$ |5 l* o# v    }
  }
};
. R, P, E' [$ {1 v</script>
0 }( A, i6 p5 o; U


- N1 }  w) c) D. s$ p

- Z6 |5 ^7 n0 e0 U7 ~" R
/ ~. `  p5 `. u! o! `
' O, {/ P4 o2 l2 a( O<template>
* k. ~* x2 M9 {' Y9 p  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
  data: function() {
    return {};
$ J2 `% J1 r9 ~6 N' t6 g  },
  u1 v' t7 B. n) w$ i; [  methods: {
# f  F" d$ P  ^& w+ F) I    deleteItem: function() {
6 u! T+ ^/ ~2 m% J0 @! N5 a; m* x) ?5 k      this.$emit("delete", this.index);
' H! ~0 v: r4 s3 _" B8 V& V+ h    }
( I" u2 s: C3 }; q% p  }
% P) m" l! o: b7 {& j};
</script>




( S7 {1 c* `+ Q. O5 t, t/ c