组件方式开发todolist

admin

2 E7 p) u, a% \0 j# r% q: K
1 z7 T0 E0 [+ ?9 T) o
* N1 q# [6 t, }% {/ J! Q# U. y
% Z1 x9 \( @1 K4 ?# x* i<template>
8 \7 Y5 C% U7 O8 o" s8 ^+ N/ A  <div id="App">
    <input v-model="inputValue" />
9 k7 e6 K! a8 n7 P: o5 P8 N    <button @click="submit">Submit</button>
+ R0 a# M4 Q+ K. N6 [# _    <ul>
      <todoItem
        v-for="(item,index) in List"
6 y) }& N  U7 G        :key="index"
! |: u( F; b+ I" k        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
) e; |& k* X6 V: i2 B  </div>
+ G  ~1 R4 ^/ q# X( P! z8 U</template>

6 D% Y* t2 L3 e. {<script>
1 X- q5 V* ]. d# m0 l( A0 D2 b; Pimport todoItem from "@/components/item.vue";

6 n+ f3 S% j4 u, m% Q. e6 Y0 {export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
$ [8 g$ s, ]: C+ j; v' l    };
. e4 m' v# U/ s3 P  },
  components: {
    todoItem
+ f) T6 Z  k/ T8 }0 M+ k  },
  methods: {
, @4 h: ~; C9 w; `5 ^8 H( F    submit: function() {
9 v! u' \, ^$ M6 _      if (this.inputValue != "") {
        this.List.push(this.inputValue);
9 B! n0 f1 L$ R8 z) ]      }
7 K; S2 g5 f! o4 v  A      this.inputValue = "";
: a3 M- E  O. ^    },
    handleDelete: function(index) {
  v) U/ ], [* \3 H$ J( u; c      this.List.splice(index, 1);
% f; P+ |" X; f, F4 D    }
. z0 i- W5 ?$ H7 d+ q/ w0 q  }
; |. \% m" Y% N6 m" o$ x, C  B};
</script>

. G- ?3 R1 e$ S2 z
# `6 v, N! c' _; t
+ W1 d' B4 k! \/ F5 Q& m+ c( S
# t! `# }) p% t- ^7 Y6 ], M1 g

& {6 V, x7 V  j6 A+ A
<template>
# [9 }2 C+ @% [  <li @click="deleteItem">{{content}}</li>
</template>

<script>
export default {
  props: ["content", "index"],
7 Z" q) Z- t2 i6 R1 c0 `3 A  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
- b  ~) g. y* f& b      this.$emit("delete", this.index);
    }
  }
5 _# f5 I8 d" O  l9 q9 ]; C};
" z$ G, }$ r' R6 c</script>
# r$ Y$ [+ B8 `" P1 A