组件方式开发todolist

admin

4 c4 O) `' x4 [


. }& y2 x) H: B( P4 U<template>
; s. i  J$ [3 v" g  |: K  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
6 B, h6 e% W- A6 W' W! J- ?- R        v-for="(item,index) in List"
        :key="index"
1 R: ~$ N* S1 U' W" J: d( Y        :content="item"
, X+ J& t: q8 y        :index="index"
) m2 ?: D# o6 y- H  I% P( B' _        @delete="handleDelete"
      ></todoItem>
/ v, f  ^# X0 H5 `    </ul>
  </div>
</template>
; K3 \; B0 X- J- U! K1 v
7 z% L) b& T1 J  U' O9 q<script>
import todoItem from "@/components/item.vue";
$ v5 a# r, R9 y! [5 F, P( q$ g
export default {
/ [3 s, k, W- A2 i# ~8 f7 a: @  data: function() {
    return {
      List: [],
      inputValue: ""
1 @' J" K/ T) K    };
  },
( {: B: q' X8 e0 c  components: {
    todoItem
; }; J6 S2 r+ O$ Y# j' S! p, d  },
( B" D  Z  i. c& q  methods: {
    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
+ Z5 C, W3 A. a. T2 U! Q    },
0 Z0 A: I, p9 U    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
# |3 R# h1 }0 i; U; h</script>
& L- u- h! |9 ], k

4 D! S, B0 }0 L/ k& ]# d5 W


8 S8 U1 j. T" t
7 r1 J; M& v. K6 ^5 C' v4 V
8 c/ o! |  D+ @<template>
6 _# h  o1 Y0 i; a+ g  <li @click="deleteItem">{{content}}</li>
0 v$ @6 }0 n; I- O& X/ I6 l# w</template>

2 P8 ~; i. J6 c) e' f2 X3 @<script>
export default {
6 {0 c% h$ u+ Q1 k) ?8 X0 t  props: ["content", "index"],
  data: function() {
% ~6 i' q: s. Y    return {};
/ j) X( d2 P- s( T0 ?& A2 V  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
% W% S1 \  R. [0 j$ \, `( ^    }
1 p5 N- }- p8 _# A! z5 i. b/ w8 [* p  }
};
3 ]3 F' `! @* y+ R' P( C</script>
9 X7 s7 r% W7 e0 U8 q
) R/ m* a( T  \6 @' d
3 Y6 O$ T' t! c) p
- f. o4 J0 o/ s) L6 s4 N
9 e1 V$ n2 d5 m7 u' O# }9 c) j