组件方式开发todolist

admin

<template>
  <div id="App">
) ^8 T) P) r7 S0 z; e! ]    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
- B7 Z. u+ u) U5 M! _/ g9 @4 U* Y; J    <ul>
$ a. ^$ R3 p/ ~2 n- ~$ \9 k3 U      <todoItem
. U; O" q% d, {2 H4 O        v-for="(item,index) in List"
% p& L. q8 z0 c8 p6 ~7 m2 L4 p$ N        :key="index"
        :content="item"
        :index="index"
7 a! D: |% |" F  _) m        @delete="handleDelete"
      ></todoItem>
    </ul>
( f4 s; @4 @  q( Y0 }  </div>
</template>

<script>
import todoItem from "@/components/item.vue";
* m2 v9 \  Z; T
export default {
( Q/ ~2 }( n2 O( P6 \8 x$ p  data: function() {
    return {
" |! Y$ u1 Y) [7 m( @      List: [],
: F9 E1 ?7 w# ?/ \, Q& P& _2 N  a      inputValue: ""
  P: k. `. h1 p  y) n    };
  },
1 }- M: A/ A7 K4 e. W- U6 }  components: {
    todoItem
  },
2 Y+ e0 W# o# h# C; M0 ^  y. }; V  methods: {
( p2 o  T) L) W" T8 @    submit: function() {
# W4 V' I: Z/ b% |      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
" R1 |. |! ?, t4 F: ~    },
    handleDelete: function(index) {
& J% h8 J* i1 ^      this.List.splice(index, 1);
    }
1 H) X" x% ^" v$ V( ?: n  }
! R" _/ G* [6 ^: H};
</script>
% x4 K# D& I/ [- e

7 b8 M# h$ j6 W6 {5 I' J2 r) e

9 |* R9 W8 S# F# j+ t
3 O6 a1 r) n8 u/ U
0 \3 ~2 b1 c% f* o! F
' y) a: a- B" [<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
' R* o, ?3 a: y5 m  props: ["content", "index"],
  W6 e+ @+ @& D5 q; i% x  data: function() {
4 X% }! M; t0 g6 k% u    return {};
: I! u/ s# e% v" z* o  },
# Q5 C; Q, ~' \1 P4 A  methods: {
    deleteItem: function() {
) c# r" D! O( C. n+ e      this.$emit("delete", this.index);
    }
  }
};
</script>
% I, q7 q4 Z+ r* L4 }) U
; }5 m2 m6 Q$ k2 q' J7 G: ?) V+ j