组件方式开发todolist

admin

2 S- z( ^( M, Y/ R: w$ R4 _' ~
+ X/ D* w7 O3 U: f5 ^
1 X4 X- H& j. s$ u# {<template>
  <div id="App">
    <input v-model="inputValue" />
    <button @click="submit">Submit</button>
% l" O6 j" y) a2 B    <ul>
) T2 ]. E+ \# F3 ^4 S+ E      <todoItem
        v-for="(item,index) in List"
( b: `; H8 Z/ A: m! L        :key="index"
8 \- {2 S) Y+ a* r9 r6 q; z        :content="item"
        :index="index"
        @delete="handleDelete"
1 {# ~: d" b# N" J! c/ D; n; X      ></todoItem>
    </ul>
  </div>
, B0 P" t8 q% w+ W2 B0 d</template>
& }! R; N- ~8 R
<script>
/ O) a6 n5 x3 Y6 ]import todoItem from "@/components/item.vue";
" j: s8 u& N/ T9 d! Q) O! s: g+ E
+ j4 ]2 N. A8 H0 a% v: f4 x. Hexport default {
, A! w, V6 L" A; |  data: function() {
# l8 \1 C* A! e% h    return {
      List: [],
7 |7 f0 L+ d  ]! t& b* I. q      inputValue: ""
    };
8 Y' \3 Q5 \7 W% S  },
  components: {
8 F1 D! Y( r6 V6 d9 I$ h$ {5 c    todoItem
/ e% d) q2 l4 S/ \  },
3 E3 x9 H+ r% |% F( y  methods: {
    submit: function() {
      if (this.inputValue != "") {
  Y/ z" N/ j5 `- {* S        this.List.push(this.inputValue);
9 W1 ?9 ?$ n% S9 U% a      }
      this.inputValue = "";
    },
    handleDelete: function(index) {
; w- J) F" E9 @) l      this.List.splice(index, 1);
9 L3 P4 ~2 e! \+ B3 C2 {    }
6 J7 `' ]  V2 W  }
" Y5 O7 s; [+ M/ H};
</script>


4 @8 W3 V' e  N3 r0 _: E5 _, L


, N$ g( k7 s) |) [$ e
! U( C0 ?( \7 U& k0 E
! U. O( J3 |# }- o4 L  M<template>
  <li @click="deleteItem">{{content}}</li>
</template>
) F$ w0 a( ~# v
<script>
export default {
  props: ["content", "index"],
  data: function() {
8 t4 _! ~( R' r  z    return {};
+ K" `) s* M% z. C+ o# H1 F, I  },
: M7 T/ `' K; i) P  methods: {
    deleteItem: function() {
7 y1 A. _0 u8 G8 g      this.$emit("delete", this.index);
    }
  }
2 P" ~7 }+ y- x};
5 k1 I3 l* E- L, C5 Q5 m) }</script>
) m3 g6 b" h# F6 T+ D: t( z
! M6 |: e" m5 f9 J3 w5 X7 O
7 K- Q' j5 W" y  O