组件方式开发todolist

admin

7 A8 ]- ?# r; g6 e

<template>
" j' K! g+ A  Y# I  <div id="App">
" n1 g& h2 ?+ d( d, G( C4 Y    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
% C2 v( J5 k4 o      <todoItem
) ~; n, F, ^/ ^/ A( P9 l/ ]        v-for="(item,index) in List"
        :key="index"
        :content="item"
0 B" s) }5 T; r1 O- D+ e/ R        :index="index"
: e) q/ [" r9 L6 ~6 [1 P. }        @delete="handleDelete"
0 @% A' s3 Y8 ~6 R9 m      ></todoItem>
6 H' c9 h( i: k% _. @    </ul>
, E6 s* B: l$ W$ W0 X0 b  </div>
</template>
7 c; L0 ]. _' E9 l& M. t
: N- A% g4 s7 O0 j5 _<script>
5 e1 l: [: z9 R; K( y' _( |import todoItem from "@/components/item.vue";

0 n5 c) n; f* d+ N) w& Zexport default {
+ M0 U, ~" ~0 g& N4 K/ @  data: function() {
4 T! a  T( R1 c  @) P0 t5 ^$ m) F    return {
; V3 B/ g, R. X: t* ?8 |4 q2 J0 [      List: [],
, [: [2 W6 w! g  H' f7 J      inputValue: ""
, \: F8 P: `) u  g9 y6 j    };
  },
  components: {
    todoItem
. i7 y, E* y5 L$ V) Z) A  },
  methods: {
    submit: function() {
" N  t+ ~4 B" w, n; m+ }: q6 q1 k5 B      if (this.inputValue != "") {
        this.List.push(this.inputValue);
8 c9 s# U; }3 l2 `      }
! ?% @0 Y0 B7 P* X3 P      this.inputValue = "";
    },
  L, ~( L- N* {% K& Y* a    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
- f0 w  Z! H" J) v$ `  w1 w};
( x  e9 M# T9 X5 [* r</script>
; t& I$ x" j5 M8 Z  z( ?, Z
# a% A/ t$ m  d( Z0 ?' b5 g
$ ^0 s1 u# H" ?8 Q" }5 F7 E0 A
# Y4 G, d- W! Y& G$ Q: T


8 T3 ?8 w& T- e# Q
" Z/ f& W% e5 O; r' a<template>
$ u4 S7 o" G% G  <li @click="deleteItem">{{content}}</li>
6 ?5 q$ r* \8 `& |5 {. ]</template>

( z) T- }% ~  E7 Z. n<script>
. q7 T: E8 R" j% `: R9 Aexport default {
  props: ["content", "index"],
- H' ?- s; N6 e& H  data: function() {
    return {};
+ `% y) r# G0 y' M: J  e+ s  },
  methods: {
; g/ ]2 Q; e* ^0 R8 T    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
</script>
/ S& Q2 s1 u( P9 U# Q

- K0 \/ M$ {" D" }1 W$ ^$ r
) |: G! x& B0 X* j: ]