组件方式开发todolist

admin

" u& n+ F2 Q; ?. g) r5 @<template>
  <div id="App">
! F, ]* L9 v5 l  j3 U7 }    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
$ e, ]& D- @/ O      <todoItem
4 v: Y- s- t6 @3 L" x        v-for="(item,index) in List"
1 S5 x1 W3 w  R        :key="index"
8 U) {: R& T! V) v- e0 z( g        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
& n/ ~6 c4 U0 D5 k    </ul>
; m1 b" x; Y* J  </div>
</template>
; R0 _% m4 }7 D3 g- F! t: S
' R! O- ]! A1 h) @1 t" B! ]- p<script>
import todoItem from "@/components/item.vue";

  C# {# z% q! A. x& @" |$ g2 s0 Eexport default {
  data: function() {
- V0 `) d( O% B! F) X    return {
: E9 N( O7 x9 r$ `6 F& o      List: [],
6 b# z. v  N, _- C' C( n) V      inputValue: ""
    };
  },
7 b; B6 t- v" H# _2 J: M' K  components: {
    todoItem
0 u: t/ c, Q# h" c7 o7 E  },
5 h) l( x" Y! _" I. a0 I4 p  methods: {
5 S; R+ U: l0 M/ q    submit: function() {
" H9 i1 H1 y! |1 n6 l- A      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
5 {/ F( h* f& ?- I3 t2 I      this.inputValue = "";
6 [/ L4 h* E8 Y& o$ F# t    },
  {$ Q4 ?& g! J' [    handleDelete: function(index) {
& g! |7 g& V8 g1 C' \2 W0 ~& z      this.List.splice(index, 1);
: v  W; ~: E- X; B: A8 Y    }
" ~" y( d* S/ e4 G  }
; g& z0 f+ n- e$ }; [};
- {5 [+ k+ h0 ]2 J+ a</script>
0 q# w; X+ q) X8 z



5 q5 Q: u: I" ^" A# @9 o
/ e& B- l+ N. x- O

<template>
  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
0 A: H6 u  q$ p% C  props: ["content", "index"],
  data: function() {
/ W2 z+ l8 b! |- K& g    return {};
8 }( M6 o, H; U; A  },
6 [! r- W: H5 S; G  methods: {
. v& o4 I5 C8 F    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
# x' {" V" P. x5 |. [</script>



: R) u; Q+ l+ q2 d: ~7 d+ A( O
  H4 C0 b0 l4 B4 M# \/ L