组件方式开发todolist

admin

/ k0 |% W" g) i; \" G( y* \/ D, p
) v$ M; q6 ^% P9 C/ r, l7 m

8 {; [0 ~  ~7 E, a+ U+ v<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
  x9 U3 A5 k) r5 ?9 }$ [: C* I    <ul>
      <todoItem
( s" ]8 ?9 T  y0 r        v-for="(item,index) in List"
        :key="index"
: l9 x$ |# r0 N        :content="item"
9 T6 k' M1 p, I1 G7 X        :index="index"
5 w/ m  n- |# ]9 E! e        @delete="handleDelete"
      ></todoItem>
    </ul>
3 K  w# H1 @: t  </div>
/ ?$ b) p7 e8 Q6 N) ]" Q& Q& |</template>
' J0 d2 R2 [0 P9 o6 r
! i* ]# z: u, F- w3 f8 `<script>
import todoItem from "@/components/item.vue";
/ R6 Z" h) I+ d1 m2 r. p
export default {
  data: function() {
    return {
      List: [],
      inputValue: ""
4 b, v6 c6 a8 R' @/ D! S    };
( X# C2 G& g3 ~7 I9 x1 J; s% c! {  },
! y4 Y1 P* G$ b" e  components: {
    todoItem
# ]5 v. l9 ?+ `% e  },
) I  d4 A5 U$ Z/ i  methods: {
+ T( O4 O' K1 N& @( n, r    submit: function() {
      if (this.inputValue != "") {
1 C: N  F& t1 o# Y" |& k        this.List.push(this.inputValue);
2 T3 w; y. X: {      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
    }
8 _$ R% x- \) s; E  i/ ~8 @2 A  }
! f$ S' s. [  \  [$ c; _6 B};
$ w2 K9 @5 v$ z- d</script>



( Y0 `  l0 w8 ]
! N) W, n6 p+ g5 g

& R! W9 j$ T" b$ {
# P( u1 C. O3 a1 H4 s<template>
  <li @click="deleteItem">{{content}}</li>
</template>
( o; Y+ N! Q/ r4 k  i; _4 v
# _( h" g) o  ?<script>
3 Z7 u% K/ m- I2 s/ ]% Q: jexport default {
5 x/ t' w% z* a6 T$ d  props: ["content", "index"],
5 W1 |( H. Z; V  data: function() {
    return {};
; |$ }" O8 O( M/ h  B( ~5 J' x  },
  methods: {
. ~) I( {% Z: V7 B9 a    deleteItem: function() {
! w8 w4 `+ u- w0 t      this.$emit("delete", this.index);
! s0 y2 f3 O' N/ Z0 Y* G) b    }
  }
};
</script>
6 \' y& b  p: S, g+ z% U5 n; m' u& G

; P# |1 O1 H( O% d  \0 h# w' M
5 t! R" a8 Q  k- ?
7 S7 [" S/ A: i" M4 Y