组件方式开发todolist

admin

& q% j* E' d: i% |$ Q# t

# |: {% H# K, ?! l& n* _/ P  M
<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
9 [* b0 f: I$ \/ t) M    <ul>
& t; ^9 a/ o) [& g      <todoItem
        v-for="(item,index) in List"
* y+ A! e, d: N+ V4 `. [        :key="index"
        :content="item"
        :index="index"
9 v$ I( c- y) s        @delete="handleDelete"
8 P7 a0 u0 H. o1 ~. [" _      ></todoItem>
    </ul>
6 |) u* R6 J: O  </div>
2 ~' z. Y6 Y. ?& b</template>
! d6 L4 I, ^1 K0 E, F" L( L7 l
<script>
8 b. ~. e/ J& m! Q4 Uimport todoItem from "@/components/item.vue";

export default {
  data: function() {
% Y1 V% d# D( }" Q9 E% L  u2 p    return {
$ \* M. q& ^* @$ x1 ^. k/ E      List: [],
! F- T' S' v. e( e4 |      inputValue: ""
    };
- E* E& {# ^8 i* o4 ~1 W' |  },
8 l% k- v4 o6 p( s2 [% e  components: {
    todoItem
  },
  methods: {
1 x5 ]9 a; c* _* Z* _; R+ s1 w/ H    submit: function() {
* a1 V9 U( I0 g0 L! K      if (this.inputValue != "") {
4 A6 I9 o6 d2 z: A: f        this.List.push(this.inputValue);
- c0 Z: n7 J' K1 `! V      }
      this.inputValue = "";
    },
0 y7 [6 V+ l, n# u5 ?; s5 {    handleDelete: function(index) {
      this.List.splice(index, 1);
; `) J5 b! N' q: W+ G    }
* u0 }* o$ d+ r  P4 u7 g  }
};
- p) q8 @5 ^5 P$ S  j! ]</script>
, x' {  d; y6 `7 C9 G8 A0 J

/ `. A5 k. i6 N: M3 k" O

: ~# Q1 V2 s! D$ T, k
3 z  J5 _7 [0 k- n+ W- W
+ w& d. f  ]- n9 V7 n
, U( E4 j" c! ], c& d3 b- n* E<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
4 m0 B5 w2 q3 z& Y. x  props: ["content", "index"],
" R- ]7 d# I9 ]; U8 }' n  data: function() {
5 N  M* h' m+ p4 s9 k    return {};
- C% U' P; W2 U" h4 K' f: g( H  },
. `" b+ K& X& ]3 U  methods: {
    deleteItem: function() {
/ a8 C4 \8 L( E* @1 q      this.$emit("delete", this.index);
  w- e$ l0 E! U/ f/ ?9 |7 M    }
  }
};
</script>


4 i7 q2 o- U/ o% V* a- p$ d- K" ?