组件方式开发todolist

admin

+ X) [/ k' o  u0 u/ x/ }

9 k8 T6 T' k* x- Q% J+ D% |<template>
  <div id="App">
( X+ {5 k" J/ G2 x1 l5 c! J    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
: E# p* [. |1 b' S" W      <todoItem
        v-for="(item,index) in List"
9 M* M6 {& `: h) |, e) P& T        :key="index"
        :content="item"
# ~4 v. ?! Z0 V7 m" u        :index="index"
        @delete="handleDelete"
2 D- F9 u- F! L& S' }% Q  _) K6 y      ></todoItem>
    </ul>
# p0 U. M, P+ O7 k& x) H7 X  </div>
6 g5 O; J4 m3 {0 ^</template>
, ^1 k5 W2 D$ S- f
' P1 A2 _. h% S' r! s) k: x+ q) P, a<script>
8 }8 m2 o* f! N" U! `. a  ^import todoItem from "@/components/item.vue";

export default {
+ c; X& S9 P3 g  data: function() {
: [  n; `5 ?- V- L    return {
$ r0 E% e% k& `2 c( L      List: [],
      inputValue: ""
    };
  },
1 o  H6 o; u/ \  components: {
/ _5 q5 |3 k4 _    todoItem
* Q/ @! N+ O. D* r9 s! T$ n  },
! E8 S$ Z/ X0 R6 }0 X  methods: {
    submit: function() {
" X' x% {4 A/ N5 H; [7 c      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
* q4 L' J6 n/ `% Z    },
    handleDelete: function(index) {
* A  _8 A6 l2 Z2 }, R6 }4 c      this.List.splice(index, 1);
. K3 E6 B, G* I: X2 b8 ?! V3 @  e$ X* Y    }
+ _8 h$ Q7 z4 m+ N  }
0 A1 k( ~' \9 T$ K8 {; f; a9 _};
</script>
. V4 q: P9 I5 w



& @/ O5 C  ]+ y5 A: m: `


" \$ H, |/ C3 x* L  R) Z<template>
5 P% |$ T5 s$ C3 Z% j3 ~5 Q+ K  <li @click="deleteItem">{{content}}</li>
. f$ M& z# d" l& z) L</template>

7 P  L- s, U- B<script>
export default {
  props: ["content", "index"],
% W& J$ t. p) u  data: function() {
    return {};
( d6 d4 ?$ h2 [6 ]' R/ @5 q0 @  n  },
  methods: {
9 A  H; y8 @# J    deleteItem: function() {
      this.$emit("delete", this.index);
% g4 ]2 r6 Q( g3 P: r- s* E" q    }
+ ]" C! S) }$ u( M( S: \  }
! b7 W5 Z# c. l' q0 d3 \};
; ^2 i9 T8 U/ g6 Q</script>
4 \7 b: Y) B4 B7 i# U: Y& p
- ~) f8 Y% M$ Q2 r/ M3 x- J/ B
8 d6 O& t% j) _

! O0 J3 V3 T* |! s; t, v