组件方式开发todolist

admin

<template>
  <div id="App">
" I+ B; S; a0 R8 S    <input v-model="inputValue" />
4 ?  S+ k6 h5 r$ ?    <button @click="submit">Submit</button>
    <ul>
: P! q' q7 ?4 Q; v2 I" q& _/ {      <todoItem
        v-for="(item,index) in List"
  M4 h! F- |" `; @* ]        :key="index"
2 K8 |- T' l6 b$ F* x+ Q3 V- _* U# ]        :content="item"
        :index="index"
        @delete="handleDelete"
5 J( s4 W/ o9 w5 x* ~" P- p      ></todoItem>
: ^; O8 E3 [; I    </ul>
, Q* K' l- L' C  </div>
" w9 \1 X; l  X9 v</template>
5 y8 F* ~# l2 |0 P& U+ ?& n9 h
<script>
8 O2 Z0 m4 T0 Gimport todoItem from "@/components/item.vue";

; H# |9 {0 j3 c. Lexport default {
, S( _! l8 C5 p7 R* B: b  data: function() {
) p& O  @) N* c0 n    return {
      List: [],
      inputValue: ""
) O4 u2 D; h" G* H* I8 v& r+ s  l5 ]! ~    };
& h$ R" e5 t# M) u; H  },
, A, X" C2 K4 g% {. @7 y) @  components: {
    todoItem
; A6 V  q( o# w  I: f0 }! K+ B  },
4 S* Q* W" U) V  ^% i  methods: {
    submit: function() {
! S7 X1 u$ H7 `6 ]+ d3 @      if (this.inputValue != "") {
5 T5 ]0 F6 \3 e        this.List.push(this.inputValue);
      }
  |5 m' ^; _$ t) b6 v$ y5 ~      this.inputValue = "";
; Z4 Y  r% P# O    },
    handleDelete: function(index) {
      this.List.splice(index, 1);
% @  I$ O. `/ o9 @, p    }
  }
};
% v3 ]  E+ f# `* ~% ^</script>

+ B* L7 X, u, w4 ^( i+ @  Z2 W
! x& l+ h: P7 I( ^7 Z) f- ]
1 k; Y/ E* j2 h

: x3 w. @" ^! Q. U) B

<template>
1 F* s( v7 d2 M5 m7 O  <li @click="deleteItem">{{content}}</li>
</template>

<script>
7 t2 u2 w/ D! W) j" `+ b5 Lexport default {
  props: ["content", "index"],
  data: function() {
# f1 ]" s, j7 M& n0 ~/ B3 ?8 c8 ~    return {};
4 V4 F5 l1 h' A0 t3 [: ?  },
  methods: {
" H2 h. H% \2 a, M* M7 {4 O    deleteItem: function() {
  |) _! @& @3 v4 B5 N      this.$emit("delete", this.index);
3 x1 f7 {5 c, J! s4 v% X) T    }
$ X4 e1 `6 `1 U9 W# [8 ?  }
};
; f1 J/ ?( r/ i# f  x* D</script>
, {/ L0 N% b3 c9 h* ?5 w& `



9 b* l9 l% q0 {( |% k3 C0 C