组件方式开发todolist

admin

* ~+ P- i4 |8 K5 \' X- P! \- S<template>
* h' R8 h% k* @) K, {7 s  <div id="App">
( i6 R7 e' Q- w2 @* Q* Q2 N    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
) e# o, R5 l& k5 b# {$ }+ ?. C6 A    <ul>
      <todoItem
        v-for="(item,index) in List"
; v0 q2 {3 b9 b        :key="index"
0 w5 d+ J1 _) }  z+ B' P        :content="item"
7 P  N7 b% f3 A0 g: ]        :index="index"
: f: P. s: F% z, H% c$ n        @delete="handleDelete"
3 q7 t) J9 i) z5 b$ j      ></todoItem>
    </ul>
$ R6 w! @2 P/ [) T4 ]  </div>
</template>

7 O3 g+ z6 h# D7 |: N5 p8 t5 a& Q<script>
import todoItem from "@/components/item.vue";

' S- H: a+ d, ~7 e- M8 z; w5 X1 Aexport default {
' F2 v/ S) y2 R" V  data: function() {
    return {
: p5 V& f2 ~) o$ A+ b6 w" o      List: [],
      inputValue: ""
    };
0 x0 ]- K) o8 W- d! e8 S7 ^0 r  },
  R5 p6 x2 s: R- S  components: {
    todoItem
" e5 p& S. ]) K! c& v2 J+ ?; S  },
  methods: {
    submit: function() {
% d' [" U+ V3 o      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
. f& }* i7 f4 s' m  Z: \* V      this.inputValue = "";
! U4 j, R8 x3 R6 j    },
; O; e, m+ \1 v1 A    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
4 S7 K% ^) I* w) Q0 D! Z% j};
</script>
6 }- v$ [3 A! H. R/ [0 L3 m
# j) q+ ]+ Y  ^5 c7 x

# d( ^6 e1 o. }; R0 q

; k- X% m+ ^* _) z2 @

<template>
3 y. g& I3 d" e" a2 W6 m' G  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
7 z) M% W$ }4 X  T1 |  props: ["content", "index"],
, S, Y# }$ Q2 ?( ^- a( L/ I  data: function() {
$ K! J) r4 I  K! E* Z! o+ Q    return {};
. x/ G! Z9 A0 {6 ^' e  },
  methods: {
    deleteItem: function() {
8 u) W9 ?, A! v      this.$emit("delete", this.index);
% {- d8 J; _! |8 d) V/ W: q& r    }
  }
/ q! q6 D+ `! D3 N, D8 T8 W: s) L};
</script>

. \, V, Q. ]. C7 z. ]7 a
* v0 P3 P) d6 N6 q! w0 z
" t$ i6 q1 H) t, X% Y2 i7 z