组件方式开发todolist

admin

% X- q* l6 f3 r
0 O5 _  h9 T/ _* ~0 h3 i- Q3 v) t8 X
/ x! E! R$ l6 ?9 I  a# L
<template>
6 B& {4 h" _/ n% i# {  <div id="App">
/ b* c& h+ n- C- I: n6 @    <input v-model="inputValue" />
0 n" a# s% o) D% J/ V& E    <button @click="submit">Submit</button>
* P1 ^( n! N& P. L) G1 N    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
        :content="item"
( Y6 D6 y6 M, I: {4 ]0 d        :index="index"
        @delete="handleDelete"
      ></todoItem>
    </ul>
7 W8 r) V  o- f5 M6 p7 A  </div>
</template>
% x2 l* b  ?" z/ p% d+ `9 V
  B  `$ Q$ n. q4 W! V<script>
  m) z# T. _0 }/ d1 Aimport todoItem from "@/components/item.vue";

5 c* B3 w7 @3 T8 J/ c& Qexport default {
6 ^( Z7 {! F) o* b- D  E' j  data: function() {
    return {
" F) m5 I" j1 a; f$ ?, q! h, E# T      List: [],
: c7 K4 @' x; `5 Z% w' E0 t      inputValue: ""
    };
  },
  components: {
% R' B2 H' {4 W" s    todoItem
  },
# r0 e4 V7 P( }& u$ ~  methods: {
" B$ c7 d" }& ^$ ~    submit: function() {
8 _. l1 x/ H' g% @+ O8 S2 h+ ^' k& c      if (this.inputValue != "") {
        this.List.push(this.inputValue);
7 g4 M% E& e; Z* r      }
      this.inputValue = "";
. ]/ o7 U+ [8 _2 [- v, f) c* q+ e" w    },
6 ^- V! v. w" j# X" m. V0 C    handleDelete: function(index) {
1 Y. ?/ a$ ~: N' Z7 k      this.List.splice(index, 1);
    }
  }
};
. a9 n) }5 w/ A$ o# A$ ]</script>
6 j5 a) v3 D5 W" Y% r
! ], b: n6 U& v, z. ]2 `8 ]

$ |6 F/ N! L) J. _; @; G, e/ B
: i) u, J: v4 |, W  a$ R$ n" L

, }3 C7 Z0 ]" E# h- p
' ^7 d1 Q2 y  d: A% h<template>
0 {) n4 W  C6 |5 G. D0 o  <li @click="deleteItem">{{content}}</li>
</template>
6 n( T! u! T+ N, @  @
<script>
export default {
2 D# J. b* q0 h5 O1 ]& U5 f) I  props: ["content", "index"],
8 @+ F  V5 ?1 j* d  data: function() {
    return {};
  },
, x. X7 I" v/ K$ Z* X  methods: {
0 w- E- T& N0 `, K$ E    deleteItem: function() {
* z9 T, x7 o5 @; M6 _      this.$emit("delete", this.index);
; y* Q- e1 a7 H) d8 K. c$ \8 o    }
) p' s, k5 |2 G  }
$ V$ B1 w( j' _# A};
. k( [' L: m, z- w" K* }5 I</script>
: C! h' ~  \6 r+ u6 H2 {' t



  x- i0 x# X2 ]- |: R1 y- n