组件方式开发todolist

admin

<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
. t4 O) M$ ~1 y" F        v-for="(item,index) in List"
+ y' a8 I' e$ G8 S' l  X7 f        :key="index"
3 D& e0 e, ]8 r        :content="item"
& r& S! R2 m$ j( H        :index="index"
        @delete="handleDelete"
5 C- K7 n: M) d$ e      ></todoItem>
+ b# |4 K( G3 N. w    </ul>
% n# ~9 K- o8 j" C/ [( C7 _0 l2 G  </div>
</template>

<script>
8 Y* `4 p4 G0 w! d9 l& Z. ^& B5 v3 Ximport todoItem from "@/components/item.vue";
. ], m) ?6 N1 l* [0 R- Z
export default {
$ T( ]* l0 m; ]0 E9 [  y6 A" a  data: function() {
/ _2 h7 d/ E" w: d  f6 ?0 ~    return {
      List: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
    submit: function() {
' o! X) |3 L: J. s      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
  `/ r0 E' y# z+ Y7 V# g- @# i      this.inputValue = "";
    },
, B6 ?' r5 W" R$ d& t0 J    handleDelete: function(index) {
. K, I  ~1 b+ ~  O1 }      this.List.splice(index, 1);
0 c0 f1 L1 ^5 J* m5 l7 I    }
  }
5 u. W& N+ Z( B9 u3 _0 G) D};
</script>

  y- m! y6 |6 L% `# T' O+ H
3 F. v4 K/ ~; P) \% r; @

6 n% y0 Q: A/ }  b: \

8 u3 S9 s$ Y, Q' {) t! W8 \
% }7 V5 @8 u/ h/ K2 I: }! E<template>
  <li @click="deleteItem">{{content}}</li>
</template>
& B- S) u" o0 T/ T/ _5 l
# d; |6 T  x9 [2 X# X, r) V6 z" k8 o<script>
6 M8 ?& O7 \' Y+ r$ ?) `3 Jexport default {
  props: ["content", "index"],
, d; q7 P. v% h2 P  h/ d: {8 w  data: function() {
    return {};
! M+ J' |5 ~$ |( z  },
  methods: {
+ F: V0 [8 ~& N4 s4 z% R2 L    deleteItem: function() {
0 H! `7 Y; U2 A% @  v" q      this.$emit("delete", this.index);
    }
2 x$ [& x( e! c  }
4 U9 m7 D/ V% U: H8 k% L- _};
2 z1 Q# a' r% a2 U& H</script>

" R" b7 o: t1 v
! {: N1 V4 T$ l/ s' [$ B0 |4 \