组件方式开发todolist

admin

, p- m1 t4 C- f7 t# t! ?0 |1 S


1 R/ z, U# l2 w5 @<template>
, X8 k! d6 K/ w" }* I. ?3 z1 K: v2 `% [; Y  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
/ y" \! V! R$ K% K7 z( b' ]6 n    <ul>
- x: [6 S: C- i2 F, H4 l      <todoItem
, d. r5 G# N, E        v-for="(item,index) in List"
        :key="index"
        :content="item"
        :index="index"
  h) ~; r9 M, G; r8 P* V        @delete="handleDelete"
3 Z6 ]: f2 [* \) m+ l- ^( Y4 w/ q) {% q      ></todoItem>
    </ul>
  </div>
</template>

% m3 p% [' W- w+ ~, c% A) ^/ Q% N<script>
- p5 u- |8 }+ l! aimport todoItem from "@/components/item.vue";

export default {
1 y3 ~; l' T, n0 s; k( o  data: function() {
    return {
% O: X" D& I# n9 L      List: [],
; ?& W  d, c* q3 H+ B" C* I      inputValue: ""
+ N  O! B8 s& t5 E: l6 s    };
4 A. B; {5 T6 ~) ^  },
' P8 y; W( q9 X! H6 d& [  components: {
    todoItem
  },
  methods: {
    submit: function() {
8 N; T, I- Z3 f6 \      if (this.inputValue != "") {
        this.List.push(this.inputValue);
9 g! u4 V. V4 u( W' m      }
! z* E8 Z5 j0 h; |+ [7 o4 l0 [# T0 k      this.inputValue = "";
8 L4 ]& _4 @0 v+ ^9 H2 w    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
</script>
2 P* |7 s; r9 I3 _3 s

0 T; q1 F& X/ G: P- _" j, _



0 Z% E" [$ c! U0 G2 t! I; k
& s+ ^. h& [, ~- l$ X6 ~<template>
$ [; l% |, t% g/ K8 @  <li @click="deleteItem">{{content}}</li>
7 Q7 D( p0 ^" D7 E; P% g$ E. `) o0 I</template>

0 p, `; r& V3 A4 _6 z1 a$ V" C<script>
; V% p, b: B) f5 Kexport default {
2 O! u# S, A8 h$ @" x% z5 t  props: ["content", "index"],
  data: function() {
& H0 i. c# u0 {! i2 q% G; f    return {};
; b- \" G( W7 O4 A; I  },
/ R# q5 [1 i- \9 q1 _) I  methods: {
    deleteItem: function() {
      this.$emit("delete", this.index);
    }
  }
};
</script>
, s3 W9 U( A$ s1 v; ~6 s6 J! j
  L! @" k+ q! [0 z; K/ y