组件方式开发todolist

admin

: Y" `5 ~# R( M5 m  g) r

( p" l0 g0 {$ w<template>
  <div id="App">
0 {& `9 W( P# G1 r  \    <input v-model="inputValue" />
% F, z5 p  w. r: d    <button @click="submit">Submit</button>
    <ul>
$ i/ U% L' q& \      <todoItem
& E1 i1 h) Q% Y( F& O& W/ Z5 E        v-for="(item,index) in List"
        :key="index"
        :content="item"
' M% s' S0 b& a' @: c        :index="index"
! T' _% `: t: ^6 J: x+ ^" i: r        @delete="handleDelete"
7 L  b% G( r+ [5 c/ p5 D. \0 L: ~2 u      ></todoItem>
    </ul>
  </div>
</template>
& V: A. I* U) ~1 R/ Y
7 k1 N" }" o( M' F6 b<script>
import todoItem from "@/components/item.vue";
) ~& n) E  |& i% T
! ^/ b. }5 T+ b% `* U3 R6 W  Uexport default {
  data: function() {
    return {
& x; ?6 O1 s2 d' J      List: [],
: K* S# e* x/ }8 T1 u5 ^# `8 S! h. Y      inputValue: ""
    };
  },
  components: {
    todoItem
. ]( I: U7 P3 H1 |0 @  },
  methods: {
    submit: function() {
" [% `3 Q1 J4 I% i      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
2 n8 B9 |- a6 ]: w4 x5 J' X      this.inputValue = "";
$ X: s4 @: T! [7 N4 I/ t    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
; r- O2 l+ C0 r    }
: Q( B2 e# x3 r5 |  }
) I; r6 P: g5 x1 I' n1 e, o% W};
</script>

+ X, [; p, m1 l
. ]$ E  I' V) C6 R; I+ }
0 m7 D- T& z- W3 K' y( @7 i


8 ~3 D  Y$ f: U  o, [4 O( A+ x( h/ c
<template>
  <li @click="deleteItem">{{content}}</li>
. h( S: l" ?1 P3 p& a3 ?: i" c" X</template>

9 D% G; f# v" L- J# E<script>
3 j6 S9 i3 Z6 Qexport default {
. q2 |1 S0 y2 v; U/ B  f: R' V1 |  props: ["content", "index"],
8 s+ ^1 t% C% n% w  data: function() {
! P) |# |9 N7 I, }    return {};
4 H* y4 L2 |; ]* g4 j" c  },
4 |3 O" Q1 o  h, E4 U# e/ N/ u& ?  methods: {
; `2 P' c2 V  K6 f    deleteItem: function() {
      this.$emit("delete", this.index);
    }
- o( m; n& x1 b  [) Z  }
9 e  U  R* x) j7 P6 A- K  M9 H0 j};
</script>

, \  j8 N8 X* b" k1 ]; R4 ~5 u


6 x! M, b5 O/ a) ~- ]