组件方式开发todolist

admin

. f) E: \" s5 D! {

! {' v  T% P6 M( ?& w4 ^2 _( U<template>
  <div id="App">
    <input v-model="inputValue" />
+ U7 `! `( S2 K$ Y8 }2 Y6 G    <button @click="submit">Submit</button>
, t; c1 H  h8 h- S, Z- V    <ul>
      <todoItem
$ @$ M# z" ]; p. n6 t3 ~' Z        v-for="(item,index) in List"
1 R3 w* L2 z9 y0 m2 r: ]- }        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
1 g# \. z1 ^! G7 q7 m9 I6 U) R0 E      ></todoItem>
    </ul>
: g0 t  D% H# r( S6 \( J4 C; j4 Y  </div>
</template>
; J4 ^9 h2 |/ l3 D! S2 v. y
<script>
* |( e8 D$ q, \' pimport todoItem from "@/components/item.vue";

" c# ~; O5 r9 r! D& ]export default {
+ S7 L% [/ m2 v  data: function() {
/ s& T2 R; c- J7 P6 x% N! s    return {
      List: [],
% I- v: q% a1 t      inputValue: ""
    };
  },
  components: {
    todoItem
8 a( ]! G; T% a  },
  methods: {
    submit: function() {
: R" C4 ?9 i8 ?7 T  v$ P  E  Q; B9 S/ x      if (this.inputValue != "") {
+ Q- @/ y8 p/ a0 H1 m        this.List.push(this.inputValue);
- {+ n( A, G% Y2 K      }
      this.inputValue = "";
1 R9 ?" A1 v- y7 V5 X$ G+ p8 ]# a    },
    handleDelete: function(index) {
& ^  }( c. K) b0 W3 Z      this.List.splice(index, 1);
    }
  }
};
) Y- r* T4 d6 o. u, z) |</script>


/ ^1 h* T* \+ B
+ ]9 i5 w7 A: T7 e( F: l4 e
. V: G# N4 {) h& Q1 L+ r9 a


) [% D$ Z% i: }( p3 s: N; _8 h<template>
5 ]- K$ J4 D1 R8 y  <li @click="deleteItem">{{content}}</li>
</template>
7 \8 U  ^2 S, U0 x% y2 y
$ ]  G  r  h3 q2 ^  C. C3 R<script>
export default {
) ?3 s( d. N7 Q$ N% X( G( M; S  props: ["content", "index"],
  data: function() {
    return {};
/ W% }2 p8 e  b8 J1 {  },
  methods: {
    deleteItem: function() {
' U  X1 J" `( B. f1 m& Z8 E& p  {      this.$emit("delete", this.index);
    }
9 C  i. i  T& I$ i$ w" `8 ]  }
};
4 S5 b5 w9 R( Y8 D+ \1 v" d: X$ h</script>
+ L& o  d# z. d2 c0 i: A

  B# m/ z$ g+ s0 E$ i( ]
- e3 ~7 D" M" L: u- w