组件方式开发todolist

admin

- {2 v7 s  @4 E8 e2 o


<template>
  <div id="App">
    <input v-model="inputValue" />
3 t5 `( p% u4 [3 f4 f    <button @click="submit">Submit</button>
& a* Z( [& D% E8 ~3 u+ d/ e7 i    <ul>
: D6 x$ h( [/ B0 V  J' t      <todoItem
        v-for="(item,index) in List"
5 }, u6 L9 x" D' a5 L        :key="index"
9 v" ]; ?& G; s8 v1 ?, Y5 t. d        :content="item"
        :index="index"
        @delete="handleDelete"
) d# S( B4 ]9 J, ?* g      ></todoItem>
: P9 m. C8 N- x1 u7 {; [$ ~/ {    </ul>
  </div>
</template>

<script>
import todoItem from "@/components/item.vue";

3 J8 ]0 K" p- v5 T4 X# ~export default {
% n/ f' P0 x+ D% n) ^- Y) R; @: F  data: function() {
    return {
      List: [],
5 D  a# I6 q  {' x3 u0 Z/ B      inputValue: ""
    };
  },
! z3 m; A" @7 ?- P# p  components: {
$ n6 N1 Q6 \& `5 N    todoItem
  },
+ r, c7 l. |8 }1 C, ^  methods: {
    submit: function() {
* p5 v$ a' E2 _1 ~& w      if (this.inputValue != "") {
        this.List.push(this.inputValue);
& u; t" R' G4 j/ A" w      }
; f& D) u; e) v      this.inputValue = "";
    },
    handleDelete: function(index) {
4 r/ G3 h" U6 s- d1 B( E! h+ m      this.List.splice(index, 1);
    }
" E/ ~6 `% o3 x1 r/ R" }  }
9 D0 _, T5 X5 W. Q( @};
</script>
, e4 X; E" N. ?& r' v
- F3 \/ m+ t+ U1 {* }0 S5 C




4 M+ _- r- F! @7 A4 u% A
4 T* w# v+ _" @<template>
  <li @click="deleteItem">{{content}}</li>
</template>
! x' u2 e$ }: G1 M" u  ?& d6 j
2 g" _* Y* }, q0 r<script>
export default {
) l7 E, |- L6 M  props: ["content", "index"],
  data: function() {
& @; U5 p9 z" O# f    return {};
9 H( L1 H3 ?( l, }/ `; G& f" V2 H  },
  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
" y+ f; B# _+ e9 V9 d  }
+ v1 d/ Z  k: t7 W; A& B};
</script>
. g# u9 ^6 z" r- n, q. N



3 b' X' f- V2 |% o