组件方式开发todolist

admin

& D9 x; C' H  E. t9 Y; m. P
  Y) q" V) c$ I- r$ X6 `6 j  E

! K2 x( E2 Y1 G<template>
/ X6 M+ j. |0 P; \  <div id="App">
# S4 O+ c% m: P$ v1 M4 q' g. J    <input v-model="inputValue" />
) Q+ s" q8 b0 m1 Z9 m0 a    <button @click="submit">Submit</button>
) P$ L6 D' Y) j' I1 y6 v    <ul>
      <todoItem
        v-for="(item,index) in List"
        :key="index"
) p9 [8 V* T/ Q        :content="item"
        :index="index"
6 U/ o% P- N: e! H        @delete="handleDelete"
# i0 ]/ x) x5 l      ></todoItem>
    </ul>
# v1 ~5 ]3 a6 x6 Y  </div>
</template>
/ n7 F6 T9 J+ P
( W7 A# o& t& S3 X" R. T<script>
0 V& j$ u1 O3 U2 C, Eimport todoItem from "@/components/item.vue";

: M: W& H. j+ R+ a9 G- ?1 Z, k3 ^export default {
  data: function() {
, \! o+ _9 V2 g2 d4 T' v+ h; w) D    return {
      List: [],
      inputValue: ""
: V! `  g5 T# T$ U' x    };
! D) ~, ?+ ]- T; Q  },
1 G' O! A! a: `, l3 ^  components: {
    todoItem
/ a) |" f2 i. m! t/ d' r" U' K  },
4 r; L4 s% }% \; w  methods: {
4 _# b+ c' U" ?: v    submit: function() {
% o* q* J" ~# l      if (this.inputValue != "") {
        this.List.push(this.inputValue);
      }
) D. X4 A* s' W, T2 o% v      this.inputValue = "";
    },
    handleDelete: function(index) {
, r( {0 o. b5 s/ I! s: f      this.List.splice(index, 1);
  B/ ]1 K) F3 u: s6 ]0 \% c    }
$ A5 y8 A7 V2 q! e, l% j  }
};
% j5 X! g) v- k8 B/ |% {0 u8 P</script>

/ L6 ]1 u% a, g" Z- f8 n
/ a5 Q# y8 ]( L" I/ m
9 L! D! t/ \" ~1 t, T& L# C" [
) J2 ?3 @& o" W


<template>
! l! `& j% n: }/ R4 @: [  <li @click="deleteItem">{{content}}</li>
+ Y, g# I- h; x- i0 n) v+ ~</template>

<script>
+ m, ?2 ^- e5 f4 T( vexport default {
3 e1 a& m, n$ v: ^' P' q  props: ["content", "index"],
( Y1 b7 {: T1 P! ?  data: function() {
7 j0 k' u. y; z6 F  K0 H    return {};
4 N# u* S, T: ?. z: r  ?6 k  },
3 r8 _5 j; C( s# Z3 j  methods: {
$ ^. z. B% u9 f4 {. d% }    deleteItem: function() {
5 \; {1 ?0 x6 }  k      this.$emit("delete", this.index);
% N0 J6 p2 D: T  R    }
  }
! w; p& h% f% b' l. \, ]/ H};
! T/ q7 t3 E* h9 ?4 V  o# }( U</script>

. a: `) j  }* e1 g

0 M/ c! }  ^- e: U: ]7 y