组件方式开发todolist

admin

; t% p: h4 `4 L6 f9 j" m5 t<template>
$ t" B$ v; Y: w+ _$ b4 }8 j  <div id="App">
    <input v-model="inputValue" />
1 s3 V7 A, y5 f/ V    <button @click="submit">Submit</button>
    <ul>
1 y2 W2 q& C0 d' g  ^; P3 R1 ]      <todoItem
        v-for="(item,index) in List"
( {$ E; j2 Y( o4 W, U        :key="index"
        :content="item"
        :index="index"
+ U6 h3 g6 M9 Z; {' _2 _% o        @delete="handleDelete"
      ></todoItem>
    </ul>
  </div>
- @2 P& ^' H7 t4 [</template>
9 T- I2 p) I" c7 ^) a
<script>
3 A8 b$ s1 [1 A. {9 kimport todoItem from "@/components/item.vue";
$ u+ @4 W# _) N% L
: V3 U: ^  |. M( bexport default {
  data: function() {
1 p; A' q( f; }, f    return {
+ Y8 b6 i. e; Z- _5 g0 I$ p1 y1 \      List: [],
      inputValue: ""
    };
  },
: x1 m8 K! q, i+ A- Q* `  components: {
    todoItem
  },
  methods: {
) U& D$ d5 G0 m9 ?, L2 q, t. u  M/ F  M    submit: function() {
      if (this.inputValue != "") {
- u( b, Q* R0 l' ]1 Q3 g        this.List.push(this.inputValue);
      }
      this.inputValue = "";
6 _  c  X0 p" ^0 E0 ^- r8 t% J. `# F% ]! F    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
) ^, p: `/ T; M! U};
</script>
/ J0 ]" _3 Q5 z

- D! {! s) ^; M& |9 M
7 e6 \9 U/ D0 u$ C0 G% g6 j' H



; w& V7 P* z, V5 C8 A% ~7 R<template>
  <li @click="deleteItem">{{content}}</li>
, \6 O+ ~- ^( F- i  h/ C" e. t/ ^</template>

<script>
; D* z  r- |5 t2 ~export default {
  props: ["content", "index"],
  data: function() {
+ E# W  `4 P) L  N) T5 b    return {};
/ ]/ }) F; o+ J! J9 h  },
- [; b+ ~, ^1 f) s  methods: {
    deleteItem: function() {
8 d+ A$ J, k* R, L8 K' B! S3 _  ~      this.$emit("delete", this.index);
    }
  }
};
" z! _* {7 b! a</script>


0 j" u# g) @! b* `- I
! S2 |: L# }, C( d! ~/ m6 x+ K