组件方式开发todolist

admin

* ]0 z: `! Y0 C6 s, s

8 x' p/ O* D$ n<template>
  <div id="App">
. k/ m5 R6 y( ^* j8 ^    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
1 V  a* L. q; s: B3 U    <ul>
      <todoItem
6 `* Z/ {" T6 ?& P  L* O$ c        v-for="(item,index) in List"
9 K2 ?3 e. n& t8 ]5 q! r        :key="index"
        :content="item"
0 H, W' t! j% D* M        :index="index"
0 K, e9 f- o. e- W' ]" M- ?3 ~        @delete="handleDelete"
      ></todoItem>
4 i: r3 w! L* D; |- c+ D4 F    </ul>
0 z5 p+ z4 V/ P' j( a% g  </div>
</template>

& d5 y2 B$ c& k* R- {<script>
import todoItem from "@/components/item.vue";
7 F( o) ]4 v- A* X6 x5 T4 U
export default {
5 i8 d) a7 K+ {5 x5 L* V* y  data: function() {
    return {
1 e$ F; u+ e. }/ p$ z, m      List: [],
      inputValue: ""
# [4 R! V+ E: o+ g    };
  },
  components: {
    todoItem
  },
0 \. H3 ]3 U" f) i% C$ ]1 W0 F! F! s  methods: {
, n4 S6 I3 p) k% W- r2 s, T    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
& i* y/ R& O0 t3 @+ ]- U      this.inputValue = "";
    },
0 E! f, L" h* u# l+ e    handleDelete: function(index) {
- X" [7 Y# Q% J  U$ g      this.List.splice(index, 1);
+ F1 t' l! F5 b( G- o    }
& g/ {; F% t  \6 Y6 c' c: X+ d  }
};
* I+ w  A, c& m2 @</script>
, a+ t6 {) D1 M% @: H% R% j
/ H. T) P0 V6 o' h9 H  y+ u" h


2 n# M  Z% M1 `2 F. ~/ h7 m
7 s( F0 X0 B7 ^* L0 r+ J

2 h, E/ t+ w: _2 r0 W9 i; _<template>
3 h0 _1 o1 S5 @  <li @click="deleteItem">{{content}}</li>
</template>

- n# a9 ?; i3 o" ?+ t1 T<script>
2 ]( g5 D- ]; L% Q2 kexport default {
) M! ]0 y0 k2 Y! I7 t$ j$ Q( [  props: ["content", "index"],
. A  }: ?3 e$ A  a) c0 K  data: function() {
( w6 D# i5 z* b4 Q& M' |9 A7 c    return {};
9 H: e0 C3 i& Z, M; K4 U' ]  },
  methods: {
4 D+ ?. r& Y% J" o" ^& ]    deleteItem: function() {
      this.$emit("delete", this.index);
0 c+ y" a0 [" B+ S1 S* j" J4 W    }
; j) u% j+ |- b. f; J, ~' _  }
# V1 r+ [( d7 l# q& O};
3 @- P8 w6 h. _. T+ g2 C% r1 c- n</script>



7 g# L) F! P% ]* r  t. |9 I