组件方式开发todolist

admin

0 h+ Q& t( V! x/ P/ ~

. K9 m  U0 h9 V5 K( o) |" Y3 ~<template>
  <div id="App">
% _, o, W" e7 ]' n/ \+ {: E    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
    <ul>
      <todoItem
" `- V3 r6 ?( x        v-for="(item,index) in List"
3 c& n+ j  {% `( n        :key="index"
3 T0 C" n& V8 f2 d, B        :content="item"
. p4 V  i& r4 X1 `        :index="index"
* l$ w5 W: H( f  J, i% W% H; C& ]        @delete="handleDelete"
5 `9 `. W* w5 z$ c2 u      ></todoItem>
) C2 W* B4 [8 @( z3 h: g    </ul>
  </div>
</template>

<script>
7 d* F0 N; y1 y; C( himport todoItem from "@/components/item.vue";
: x5 P: i+ Y+ }1 l, f. Y
/ ?2 ]5 ?  T; Lexport default {
  data: function() {
    return {
8 V% ~/ F+ U  n: _. K      List: [],
      inputValue: ""
! t6 p7 i  ]7 q: C6 z$ g    };
  },
  components: {
, y5 x7 H+ m( W    todoItem
' g6 o( ?6 F" G. v6 `  },
% ^6 \, @/ q7 [. r, {5 P! e  methods: {
    submit: function() {
      if (this.inputValue != "") {
0 n0 M$ m+ _# q) T; L7 L        this.List.push(this.inputValue);
, X  d, @! Q: o      }
: U0 c) e& j$ p! F7 i: q& C2 }      this.inputValue = "";
8 `+ @1 q, P/ h" D7 \) d    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
* w3 V; U3 N3 |4 ~$ F8 u# m  r    }
. `& j: p! C* E6 b  }
+ O1 e0 _7 ~1 C% T. ?! Q. u% ?" D. ^2 r};
</script>
% g# u3 ]1 H2 A
! a- O" F! T$ w4 w" n5 {: ~; |6 H

8 e0 V) a; k9 B/ n- m, z# G



# c  k, w. p! l<template>
  <li @click="deleteItem">{{content}}</li>
</template>
5 S; M' w/ \% A7 h( A9 F
) I3 C3 ^% R$ q<script>
: M% Y9 T" O0 ~) H5 O) Vexport default {
  props: ["content", "index"],
  data: function() {
    return {};
5 m) a0 n- T* X+ G, c  },
$ G7 z8 D, m8 e  methods: {
6 s7 o2 s, ]" C% _# b    deleteItem: function() {
% P: G' b4 [4 p# q- \  p' ?' b      this.$emit("delete", this.index);
8 X: H# v& T' v+ H    }
. K# [+ Y: _5 L/ G& f- L5 \' j  }
: x2 Y+ E' l8 x& R# j+ K4 g" a% _2 P};
</script>

& [3 W$ t% b1 l

, ]1 _2 l- H4 A( `+ I