组件方式开发todolist

admin

" f+ w4 r4 y) {9 R+ K4 ~' f# ]


- H; V* }/ l' f  r) s4 A" H<template>
  <div id="App">
5 P' S: H% g0 l    <input v-model="inputValue" />
( A, z' p1 d. V! I# ~% k    <button @click="submit">Submit</button>
1 n5 x, K; }2 @8 L    <ul>
      <todoItem
9 }, c" l7 N0 n; O. I        v-for="(item,index) in List"
$ ?0 s' j% E. x( n* }        :key="index"
- i# V: d- _+ s        :content="item"
        :index="index"
" s& R" A- O  i$ W# K        @delete="handleDelete"
/ F+ e+ [, K/ f( D3 M      ></todoItem>
. E! ]* y9 o6 W    </ul>
1 i. ], t0 C/ ]  </div>
6 F7 A2 V' a" @6 d5 V# p</template>
8 i. I+ F! O  ^. q; K9 J
<script>
import todoItem from "@/components/item.vue";
( \: ]: z5 u7 |& a4 d' t# ]
0 s- u- v' J: J8 T' V$ pexport default {
  data: function() {
    return {
      List: [],
      inputValue: ""
) Q4 b8 |. w/ p9 O# K4 p- k    };
+ o( |* c8 H% @) o" @  },
  components: {
* t4 Q; V% x5 T( w1 B2 f( F    todoItem
  },
5 N# E1 v1 H: J8 u8 o. o+ ^, C  methods: {
    submit: function() {
      if (this.inputValue != "") {
8 v7 D+ p9 u$ d" I        this.List.push(this.inputValue);
0 k) _5 j8 T0 D' H) ~4 N6 M5 @% \      }
, D( r; Y* K2 ~+ _- V      this.inputValue = "";
* d1 |& F- a4 l    },
. o; C3 f2 l( }5 S    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
  }
};
</script>





1 f4 d( @  ~; U$ [, j4 D

<template>
" \0 s* B) ~* O: _+ ~; P6 y  <li @click="deleteItem">{{content}}</li>
. `& R  Q# N9 K7 O</template>

<script>
export default {
  props: ["content", "index"],
# g5 i4 ]* \/ ^7 @. L& [  data: function() {
    return {};
& a, h5 W7 X  t; K8 W, v: k  },
9 v! Y. L7 U$ B5 L2 t  methods: {
. [: s. O6 t/ p5 b9 w; R3 w    deleteItem: function() {
      this.$emit("delete", this.index);
! m; @/ x) z  _5 U# P1 b    }
  }
};
$ r6 O: L5 p& o/ m* P9 A</script>



+ Q: n& I9 ^5 ?+ m( A) z
/ o; ]0 J+ ~: V* Z; [1 f