组件方式开发todolist

admin

/ P9 _! N2 J4 F; m( f! r6 E' v/ |
1 w: X; k, Q' R, b
<template>
. x- L( x6 C8 c" F3 N  F) O  <div id="App">
) T0 B2 v- g6 g% L8 C    <input v-model="inputValue" />
! O% s! a  O' `; e. Z3 i, y- F    <button @click="submit">Submit</button>
0 @6 v5 ^; \* y    <ul>
) d+ w- P) V$ k* b9 \8 v% I- x      <todoItem
        v-for="(item,index) in List"
        :key="index"
6 w3 ?' K5 y& I, P8 ^: v        :content="item"
+ r4 W, \- b9 _  J0 N        :index="index"
9 ^  f3 _& _; H7 {' K; Z        @delete="handleDelete"
      ></todoItem>
2 ]" N- x* U* i5 y" u' m6 ?$ F    </ul>
  </div>
, F/ S* e+ c. t& M3 ^! W' q</template>
1 o) x# Q, e* g
<script>
import todoItem from "@/components/item.vue";
' @! c8 E0 ?" M. g% l
' B6 M# s. d* m, J9 g" N8 jexport default {
  data: function() {
# D/ g; E. r0 ^" s. N    return {
      List: [],
) A5 ^  l5 T$ t" `9 e7 o7 t! i      inputValue: ""
    };
  },
4 ^" d8 h# x. }8 \3 T% E$ e  components: {
    todoItem
/ h) x0 K; f) f% _: B  },
8 ~# Y6 t1 R& p& ]" Y  methods: {
    submit: function() {
6 s$ R# B. Y$ I4 ?      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
      this.inputValue = "";
4 t: S$ k7 P' B( [" F" z/ A    },
    handleDelete: function(index) {
7 [, P. H: ?# y# b- N3 |      this.List.splice(index, 1);
    }
8 t  \( `% J6 t! }* v  }
};
8 }. _! ], M& v% l# F* K</script>

" k/ w8 R6 C9 B, N8 X& E4 R5 {



. ~# J5 `8 P( V) ^& m) ^

6 _/ {. S7 k% f$ j  C; v2 U<template>
  <li @click="deleteItem">{{content}}</li>
% }% e1 P; H2 x+ f( W2 {* j0 O</template>
) f  g6 D, u* L4 y
" H2 L0 W# Q# I( L; b' A<script>
$ B: I0 x- A7 w9 n! {/ Eexport default {
+ x  |, f/ a( I( s  props: ["content", "index"],
; f' X4 m( q( Y# Z2 G) p/ |) G  data: function() {
- t: b2 ^6 x- s' n1 l1 \$ t5 B    return {};
  },
* K+ s( P0 B0 L* W: F) p7 h  methods: {
. Q8 Q8 a% {: b; V; K" w( u    deleteItem: function() {
      this.$emit("delete", this.index);
) K/ a- X& B& i0 g    }
8 A, B* l6 N9 [6 z, @- X1 q; V+ h  }
};
</script>



8 f( S& I  F* B9 t/ C1 K
- q6 w# c6 J7 h  g: s1 [