组件方式开发todolist

admin

: C9 t4 W  U" o3 W
  d5 s; q0 x1 I<template>
9 a7 Q8 P; a" N+ X6 e  <div id="App">
    <input v-model="inputValue" />
6 q0 j3 Y1 z, C8 c! o& P* U" {    <button @click="submit">Submit</button>
    <ul>
+ ^. y* h3 x5 r      <todoItem
2 d! F6 R, u4 u, s- x6 o6 p/ O        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
% `, N, h9 ^: i& G9 T9 C4 O      ></todoItem>
0 C# a; V2 Q4 D- }    </ul>
  </div>
7 r- X# |0 g! X2 S6 x8 R- q# N</template>
4 }7 @' C( [/ _) [4 e
' g( L0 N1 }9 q0 H! k7 a9 I<script>
3 _& X3 z( g8 I. @import todoItem from "@/components/item.vue";
" m3 F2 g* ?7 A! C. n
export default {
9 H% z9 d% K0 L5 m, G- F' A) D  data: function() {
. {3 G7 f) h+ L3 D    return {
      List: [],
; d% ^9 ]& c! B% o8 B  k2 Y      inputValue: ""
    };
& T1 [6 k+ U+ p( X3 \0 I: ]2 _/ X  },
+ w* b% ~  R% E/ ]  components: {
    todoItem
  },
  O& p3 a/ x, ]: i  methods: {
. u. f, z) C6 t5 X! \    submit: function() {
      if (this.inputValue != "") {
        this.List.push(this.inputValue);
" L0 }4 Y2 ?& c; o& c      }
  W- M: B7 `) C      this.inputValue = "";
    },
    handleDelete: function(index) {
! q- u  |" B( l4 j      this.List.splice(index, 1);
    }
  }
1 x$ @3 m% ?7 Y/ u3 {4 g7 W};
</script>
5 o& T- M  k1 f
" a- [; j: s: p) e0 X





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

<script>
4 W, A/ D2 R8 W& k  {" [" iexport default {
  props: ["content", "index"],
& [- M: S0 W1 i! Y1 e/ g2 A3 `, U  data: function() {
1 A* _+ L3 H3 B    return {};
  },
8 F+ l. G+ M5 D6 o  C6 w% O' E  methods: {
$ h+ ~0 r- I- c* i- z    deleteItem: function() {
" |" @. N7 I8 s4 F      this.$emit("delete", this.index);
    }
  }
* k+ a$ X" v) {4 f2 X};
# b4 h/ b& m7 x+ n& ]; d</script>


% `3 \/ M7 J7 ^, C# f. ~. P