组件方式开发todolist

admin

+ P* s- H: f" I9 a. ~1 q7 h) Q
7 @$ V" [! ]; K7 f5 m
<template>
  <div id="App">
    <input v-model="inputValue" />
& P# R$ V: r; `( `5 u! T    <button @click="submit">Submit</button>
5 W+ P$ B8 O: {/ v5 Z    <ul>
      <todoItem
        v-for="(item,index) in List"
% z! @7 w5 J: y3 _( y        :key="index"
% \) ^8 K. R7 k2 g        :content="item"
        :index="index"
        @delete="handleDelete"
8 R+ c) ~+ Z% a/ i" E  ~/ x      ></todoItem>
! `! {, D/ c1 V# ~& O( j+ a4 B1 [    </ul>
. ^. X/ v7 Z/ @$ X, ]# p, B  </div>
: s) `/ z  W9 v) _* g+ x0 a1 z, v</template>

! K, ^; d) {( q<script>
0 J0 a1 t( W% L& E4 {$ v2 `import todoItem from "@/components/item.vue";

export default {
  data: function() {
    return {
      List: [],
; ]" p5 S% R, F4 {+ w      inputValue: ""
; ]; F  z& c  c% w    };
% {, a7 g* J9 r  },
  components: {
; \9 ~  W8 [8 N8 E7 U2 u/ W    todoItem
  },
  methods: {
    submit: function() {
      if (this.inputValue != "") {
) W( E5 S* h% q/ d/ w8 z0 ?        this.List.push(this.inputValue);
; O: [) O9 X3 [" ]& o6 W! {1 n      }
4 ]) |( }& h+ n/ {% _4 \      this.inputValue = "";
    },
' {- U' h& T8 I& h    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
, k- T4 L' [( j" w# X/ q8 V  O  }
};
</script>
1 V, y. Q" |4 w
% O8 M" C3 Z- l3 B( V) J
9 K2 y' [, C- I8 n3 s' q7 }



) X  F- b9 n* w. S. U" j9 X
  d) H4 X7 U; U5 ?( S<template>
  <li @click="deleteItem">{{content}}</li>
</template>
  q5 F  T9 S% r* @5 R' o3 j& N9 P
<script>
export default {
& V# i6 N6 I( ?6 \! C3 [  props: ["content", "index"],
. _( O" G5 |3 Y2 b  data: function() {
    return {};
  },
  methods: {
    deleteItem: function() {
  p9 b: Q$ i5 }, ]. \5 ?$ N) t: Y      this.$emit("delete", this.index);
    }
  }
% B1 `. v6 l4 F& c& g};
</script>


/ b- z1 u4 o  J1 L" Y7 a
- x( A9 S5 |0 v6 @0 P/ ^